H5formData无刷新上传文件

最新推荐文章于 2020-10-04 11:13:49 发布

转载最新推荐文章于 2020-10-04 11:13:49 发布 · 598 阅读

本文介绍了如何使用JavaScript和FormData对象实现图片上传功能，并详细解释了相关代码逻辑及原理。

//图片上传
function uploadImg(fileId){
1，创建新的formData对象用append方法逐个添加键值对。
 
        var fd = new FormData();
 
fd.append("name", "志文工作室");
 
fd.append("blog", "http://lzw.me");
 
fd.append("file", document.getElementById("file"));
 
FormData发送请求：
 
var xhr = new XMLHttpRequest();      
 
xhr.open("POST" ,"http://lzw.me" , true);
 
xhr.send(fd);
 
xhr.onload = function(e) {
 
    if (this.status == 200) {
 
       alert(this.responseText);
 
    }
 
};
 
jquery中formDat使用方法：
 
$.ajax({
 
    url: "http://lzw.me",
 
    type: 'POST',
 
    data: fd,
 
    /**
 
     *必须false才会自动加上正确的Content-Type
 
     */
 
    contentType:false,
 
    /**
 
     * 必须false才会避开jQuery对 formdata 的默认处理
 
     * XMLHttpRequest会对 formdata 进行正确的处理
 
     */
 
    processData:false
 
}).done(function(result){
 
    console.log(result);
 
}).fail(function(err){
 
    console.log(err);
 
});
 
使用PHP一个完整的事例，表达formData的异步刷新

<?php
 
//php 接收表单提交信息并打印
 
if( isset( $_REQUEST['do']) ){
 
    var_dump($_REQUEST);
 
    var_dump($_FILES);
 
    die();
 
}
 
 
 
?>
 
<!DOCTYPE HTML>
 
<html>
 
    <head>
 
        <meta charset="utf-8">
 
        <title>FormData Test - lzw.me</title>
 
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 
    </head>
 
    <body>
 
        <form id="form">
 
            <input type="file" name="file" id="file" />
 
            <input type="text" name="name" id="" value="志文工作室" />
 
            <input type="text" name="blog" id="" value="http://lzw.me" />
 
            <input type="submit" name="do" id="do" value="submit" />
 
        </form>
 
        <script>
 
        $("form").submit(function(e){
 
            e.preventDefault();
 
             
 
            //空对象然后添加
 
            var fd = new FormData();
 
            fd.append("name", "志文工作室");
 
            fd.append("blog", "http://lzw.me");
 
            fd.append("file", document.getElementById("file"));
 
            //fd.append("file", $(":file")[0].files[0]); //jQuery 方式
 
            fd.append("do", "submit");
 
             
 
            //通过表单对象创建 FormData
 
            var fd = new FormData(document.getElementById("form"));
 
            //var fd = new FormData($("form:eq(0)")[0]); //jquery 方式
 
             
 
            //XMLHttpRequest 原生方式发送请求
 
            var xhr = new XMLHttpRequest();      
 
            xhr.open("POST" ,"" , true);
 
            xhr.send(fd);
 
            xhr.onload = function(e) {
 
                if (this.status == 200) {
 
                   alert(this.responseText);
 
                };
 
            };
 
            return;
 
            //jQuery 方式发送请求
 
            $.ajax({
 
                type:"post",
 
                //url:"",
 
                data: fd,
 
                processData: false,
 
                contentType: false
 
            }).done(function(res){
 
                console.log(res);
 
            });
 
             
 
            return false;
 
        });
 
        </script>
 
    </body>
 
</html>
 
}