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

申请删除 [复制链接]
查看1 | 回复0 | 2020-2-15 21:39:26 | |阅读模式
js上传文件的方式有很多种,我比较习惯用的就是模拟表单提交name值来上传文件针对FormData有一个详细的网站进行使用方法和对象说明--FormData使用form表单初始化FormData对象方式上传文件:html代码formaction=""id="form"enctype="multipart/form-data"method="post"divdivlabel请选择文件:/labelinputid="file"type="file"name="file"//divdivdivbuttontype="button"id="recordUp_btn"i#xe67c;/i上传/button/div/div/div/formjavascript代码//模拟表单上传文件form标签添加enctype="multipart/form-data"属性$.ajax({url:'../upload',dataType:'json',type:'post',cache:false,//上传文件不需要缓存data:newFormData($('#form')[0]),contentType:false,//因为是由form表单构造的FormData对象,且已经声明了属性enctype="multipart/form-data",所以这里设置为falseprocessData:false,//因为data值是FormData对象,不需要对数据做处理success:function(res){error:function(){});?备注:processData设置为false。因为data值是FormData对象,不需要对数据做处理;form标签添加enctype="multipart/form-data"属性;cache设置为false,上传文件不需要缓存;contentType设置为false。因为是由form表单构造的FormData对象,且已经声明了属性enctype="multipart/form-data",所以这里设置为false。现在我们可以看到传递的data参数就是整个form表单对象,上传后会对整个表单中包含的name值当成参数传递到后台,也就是我们只需要把要传递的参数名设置成name值就好了。另外一种情况如果不是form表单构造FormData的情况:(这里借鉴网友的博客)HTML代码divid="uploadForm"inputid="file"type="file"/buttonid="upload"type="button"upload/button/divJavaScript代码varformData=newFormData();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){这里有几处不一样:append()的第二个参数应是文件对象,即$('#file')[0].files[0]contentType也要设置为‘false’。从代码$('#file')[0].files[0]中可以看到一个inputtype="file"标签能够上传多个文件,只需要在inputtype="file"里添加multiple或multiple="multiple"属性。授予每个自然月内发布4篇或4篇以上原创或翻译IT博文的用户。不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累!授予每个自然周发布1篇到3篇原创IT博文的用户。本勋章将于次周周三上午根据用户上周的博文发布情况由系统自动颁发。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则