使用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給后臺傳輸數據，來實現頭像的上傳加載！

您的項目需求