FormData表單資料提交表單及上傳圖片詳解-linux運維-PHP中文網

FormData表單資料提交表單及上傳圖片詳解

小云云

發布： 2018-03-20 16:12:06

原創

2933 人瀏覽過

在H5中利用FormData表單資料對象，可以把form表單中所有表單元素的name與value組成一個請求字串，提交到後台。可透過js用一些鍵值對來模擬一系列表單控件，也可以使用XMLHttpRequest的send()方法異步提交表單。

<body>
    <p>
        <h2>无刷新方式收集表单数据</h2>
        <form>
            <p>用户名 : <input type="text" name="username" value="jnjk" /></p>
            <p>密 码 : <input type="password" name="password" value="123456" /></p>
            <p>邮 箱 : <input type="text" name="email" value="jnjk@qq.com" /></p>
            <p>头 像 : <input type="file" name="headimg" value="" /></p>
            <img src="" id="headimg" />
            <p style="text-align:center;"><input type="submit"  value="提交" /></p>
        </form>
    </p>
</body>

登入後複製

表單中有普通的text字元提交，也有file檔案提交，使用FormData物件可以全部取得到表單域資料。

<script type="text/javascript">
    var fm = document.getElementsByTagName("form")[0];
    var himg = document.getElementById("headimg");
    fm.addEventListener("submit",function(e){
        //使用 FormData 表单数据对象,收集表单数据
        //var fdata = new FormData(fm); //收集fm的表单信息
        var fdata = new FormData(this); //收集fm的表单信息
         
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status == 200){
                var msg = xhr.responseText;
                eval("var return_obj = "+msg);      //将返回的json字符串转化为对象
                console.log(return_obj);
                if(return_obj.status){
                    himg.setAttribute(&#39;src&#39;,return_obj.data.headimg);
                    himg.setAttribute(&#39;style&#39;,&#39;display:block&#39;);
                }else{
                    alert(return_obj.data);
                }
            }
        }
        xhr.open(&#39;post&#39;,&#39;data.php&#39;);
        xhr.send(fdata);
         
        e.preventDefault(); //阻止浏览器默认动作
    });
</script>

登入後複製

data.php

<?php
 
$data = $_POST;                 //普通表单域
$file = $_FILES[&#39;headimg&#39;];     //文件上传
 
if($file[&#39;error&#39;] > 0) exit(json_encode(array(&#39;status&#39;=>0,&#39;data&#39;=>&#39;文件异常&#39;)));
 
$save_path = &#39;./upload/&#39;.date(&#39;Ymd&#39;).&#39;/&#39;;
if(!is_dir($save_path)){
    mkdir(iconv("GBK","UTF-8",$save_path),0777,true); 
}
$name = $file[&#39;name&#39;];
 
$true_name = $save_path.$name;
$upres = move_uploaded_file($file[&#39;tmp_name&#39;],$true_name);   //修改文件存储位置
if($upres){
    $data[&#39;headimg&#39;] = $true_name;
    echo json_encode(array(&#39;status&#39;=>1,&#39;data&#39;=>$data));
}else{
    echo json_encode(array(&#39;status&#39;=>0,&#39;data&#39;=>&#39;upload error&#39;));
}

登入後複製

以上是FormData表單資料提交表單及上傳圖片詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！