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

电玩女神 2022-04-24 01:40 902阅读 0赞

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"></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代码

这里有几处不一样：

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

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

[FormData]: https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects