JS利用FormData模拟表单上传文件

js上传文件的方式有很多种，我比较习惯用的就是模拟表单提交name值来上传文件

针对FormData 有一个详细的网站进行使用方法和对象说明--FormData

使用<form>表单初始化FormData对象方式上传文件：

html代码

    <form action="" class="layui-form" id="form" enctype="multipart/form-data" method="post">
        <div class="layui-row layui-col-space10">
            <div class="layui-form-item">
                <label class="layui-form-label">请选择文件:</label>
                <input id="file" type="file" name="file"/>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" id="recordUp_btn" style="border-radius: 5px;"><i class="layui-icon">&#xe67c;</i>上传</button>
                </div>
            </div>
        </div>
    </form>

javascript代码

//模拟表单上传文件 <form>标签添加enctype="multipart/form-data"属性
        $.ajax({
            url: '../upload',
            dataType:'json',
            type:'post',
            cache:false, //上传文件不需要缓存
            data:new FormData($('#form')[0]),
            contentType:false, //因为是由<form>表单构造的FormData对象，且已经声明了属性enctype="multipart/form-data"，所以这里设置为false
            processData:false, //因为data值是FormData对象，不需要对数据做处理
            success:function(res){
                
            },
            error: function(){
                
            }
        });

 

备注：

1. processData设置为false。因为data值是FormData对象，不需要对数据做处理；
2. <form>标签添加enctype="multipart/form-data"属性；
3. cache设置为false，上传文件不需要缓存；
4. contentType设置为false。因为是由<form>表单构造的FormData对象，且已经声明了属性enctype="multipart/form-data"，所以这里设置为false。

现在我们可以看到传递的data参数就是整个form表单对象，上传后会对整个表单中包含的name值当成参数传递到后台，也就是我们只需要把要传递的参数名设置成name值就好了。

---

另外一种情况如果不是<form>表单构造FormData的情况：（这里借鉴网友的博客）

HTML代码

<div id="uploadForm">
    <input id="file" type="file"/>
    <button id="upload" type="button">upload</button>
</div>

JavaScript代码

var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);
$.ajax({
    url: '../upload',
    type: 'POST',
    cache: false,
    data: formData,
    processData: false,
    contentType: false
    }).done(function(res) {
    }).fail(function(res) {
});

这里有几处不一样：

1. append()的第二个参数应是文件对象，即 $('#file')[0].files[0]
2. contentType也要设置为‘false’。

从代码$('#file')[0].files[0]中可以看到一个<input type="file">标签能够上传多个文件，只需要在<input type="file">里添加multiple或multiple="multiple"属性。