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"属性。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值