使用FormData无刷新表单信息提交

用新技术FormData表单数据对象, 可以实现快速收集表单信息。

FormData是html5的新技术, 在主流浏览器(IE10以上版本支持)都可以正常使用。

<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">
window.onload=function(){
    var fm=document.getElementsByTagName('form')[0];
    fm.onsubmit=function(evt){
    //ajax+dom无刷新获得表单信息并传递给服务器
    //① 获得表单信息
    //利用javascript提供的新技术快速、简单地收集全部的表单域信息
    //FormData() 表单数据对象可以帮我们完成此需求
    var fd=new FormData(fm);//收集fm元素节点内部的表单域信息
    //也可写成var fd=new FormData(this);
    //fd里边有我们收集到的全部的表单域信息
    //② ajax传递表单信息
    var xhr=new XMLHttpRequest();
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4 && xhr.status==200){
            alert(xhr.responseText);
        }
    }
    xhr.open('post','./04.php');
    //xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
    xhr.send(fd);
    //event.returnValue=false; //IE6 7 8
    evt.preventDefault();//浏览器进制跳转 主流浏览器
    }
}
</script>
</head>
<body>
<h2>无刷新form表单提交(FormData)</h2>
<form method="post" >
<p>用户名：<input type="text" name="username" id="mingzi"></p>
<p>密码：<input type="password" name="userpwd" id="mima"></p>
<p>邮箱：<input type="text" name="useremail" id="youxiang"></p>
<p><input type="submit" value="注册"></p>
</form>
</body>
</html>

<?php
//获得传递过来的post格式信息
print_r($_POST);
?>

注意：FormData使用

1 ajax不要设置header头

2 form表单域必须有name属性

3 IE10以上版本支持FormData, IE9不支持

TML5实现头像的上传

这是利用form-data给后台传输数据，来实现头像的上传加载！

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    </head>
<body>
    <div class="container">
        <input enctype="multipart/form-data" type="file">
        <input id="Susername"  type="text" placeholder="用户名">
        <input id="Ssex" type="number" placeholder="年龄">
        <input id="Sage" type="text" placeholder="专业">
        <input id="Smajor" type="text" placeholder="学校">
        <input id="Sschool" type="text" placeholder="QQ">
        <input id="Sqq" type="text" placeholder="地址">
        <input id="Saddress" type="text" placeholder="座右铭">
        <input id="Smotto" type="button" value="上传">
       
        <div style="clear: both;"></div>
             <progress value="0" max="100"></progress>
    </div>
    <div class="showarea">
        <h3>显示区域</h3>
    </div>
    </body>
</html>

样式代码

 .container{
            box-sizing: border-box;
            width: 404px;
            height: 100px;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding-top: 20px;
            background: linear-gradient(to bottom,#0ff,#0ff 20px,transparent 0);
            margin: 0 auto;
        }
        input{
            padding: 0;
            margin: 0;
          
        }
        .container input[type=file]{
            width: 300px;
            height: 30px;
            border: 1px solid #ccc;
            background: #7FFFD4;
            color: #133131;
            float: left;
        }
        .container input[typr=button]{
            width: 100px;
            height: 32px;
            float: left;
            border: 1px solid #ccc;
            color:  #133131;
        }
        progress{
            display: none;
            width: 400px;
            height: 30px;
            margin-top: 7px;
        }
        .showarea{
            width: 600px;
            min-height: 200px;
            border: 1px solid #ccc;
            margin: 30px auto;
        }
        .showarea h3{
            widows: 100px;
            margin: 0 auto;
            line-height: 60px;
            text-align: center;
            border-bottom: 1px solid #cccc;
            color: #133131;
            
        }
        .showareaimg{
            max-width: 1000%;
        }

javescript代码

先简单了解一下 FormData，点击链接：https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects

IE浏览器版本最好为：IE10+，因为 FormData 兼容性问题

然后查看示例，代码如下↓

html 代码：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<style type="text/css">
#showimg{margin-top: 20px;height: 150px;}
#showimg div{width: 100px;height: 100px;line-height:100px;margin-right: 20px;float: left;text-align: center;}
#showimg img{vertical-align: middle;max-width: 100%;max-height: 100%;}
</style>
<script type="text/javascript">
jQuery(function () {
jQuery('#butSubmit').click(function () {
var file=jQuery('#fileId')[0].files;
var formDataInfo=new FormData(jQuery('#FormDataUpload')[0]);
formDataInfo.append('file',file);//表单数据
formDataInfo.append('ajajxfile', 1);//额外加数据
/*------分割线------*/
// var formDataInfo=new FormData();
// formDataInfo.append('pic', jQuery("#picId")[0].files[0]);
// formDataInfo.append('ajajxfile', 1);//额外加数据
//jQuery.each(jQuery("#fileId")[0].files,function (k,val) {
// formDataInfo.append('fileimg[]', val);
// });
// alert(formData);
jQuery.ajax({
type:'post',
url:'upload.php',
dataType:'json',
cache:false,
processData:false,//必须
contentType:false,//必须
data:formDataInfo,
success:function (data) {
// alert(data);
var html='';
for (var i=0;i<data.length;i++){
html +='<div><img src="'+data[i]+'"></div>';
}
jQuery('#showimg').html(html);
},
error:function () {
alert('Error');
}
});
});
});
</script>
</head>
<body>
<br>
<form id="FormDataUpload" action="upload.php" method="post" enctype="multipart/form-data">
<input name="img[]" type="file" id="fileId" multiple>
<input type="button" value="提交" id="butSubmit">
</form>
<div id="showimg"></div>
</body>
</html>

后台程序 PHP代码：

<?php
date_default_timezone_set('PRC');
if (!empty($_POST)){
if ($_FILES['img']['name'][0]){
$path='upload/';
if (!is_dir($path)){
mkdir(iconv("UTF-8", "GBK", $path),0777,true);
}
$datafile=$_FILES['img'];
$filearr=array();
foreach ($datafile['name'] as $key=>$value){
$type=pathinfo($value);
$filename=$path.time().mt_rand(0,999999999).'.'.$type['extension'];
if (move_uploaded_file($datafile['tmp_name'][$key],$filename)){
$filearr[]=$filename;
}
}
print_r(json_encode($filearr));die;
}
}

一个简单的ajax上传文件，欢迎广大朋友们一起来学习！

在线咨询

上一篇：网络安全之从原理看懂XSS
下一篇：h5微传单页面制作的4个加分项

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

使用FormData无刷新表单信息提交

TML5实现头像的上传

这是利用form-data给后台传输数据，来实现头像的上传加载！

您的项目需求