JS中使用FormData上传文件、图片的方法
2017-05-23 09:16
701 查看
转自http://www.jb51.net/article/89998.htm
参考:https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects
废话不多说,先上最后我用的完成版:
JS
然后是查找的资料~
XMLHttpRequest Level 2添加了一个新的接口 ---- FormData
利用FormData对象,可以通过js用一些键值对来模拟一系列表单控件,可以使用XMLHttpRequest的 send( ) 方法来异步提交表单与普通的ajax相比,使用FormData的最大优点就是可以异步上传二进制文件
FormData对象,可以把所有表单元素的name与value组成一个queryString,提交到后台。 在使用ajax提交时,使用FormData对象可以减少拼接queryString的工作量
queryString是查询字符串,http查询字符串由url中?后面的值指定
当页面上的form以GET方式向页面发送请求数据时 (如数据含有不安全字符,则浏览器先将其转换成16进制的字符再传送,如空格被转换成%20时 ) ,web server 将请求数据放入一名为QUERY_STRING的环境变量中。 Request.QueryString 方法是从这一环境变量中取出相应的值,并将被转成16进制的字符还原
使用FormData上传文件、图片
创建一个FormData空对象,然后使用append方法添加key/value
如果已经有一个Form表单,取得form对象,作为参数传入FormData对象
可以在已有表单数据的基础上,继续添加新的键值对
formdata.append ("age" , "21");
var formdata=new FormData($("#form1").[0]);//获取文件法一
//var formdata=new FormData( );
//formdata.append("file" , $("#file")[0].files[0]);//获取文件法二
$.ajax({
type : 'post',
url : '#',
data : formdata,
cache : false,
processData : false, // 不处理发送的数据,因为data值是Formdata对象,不需要对数据做处理
contentType : false, // 不设置Content-type请求头
success : function(){}
error : function(){ }
})
一个FileList对象通常来自于一个HTML input元素的files属性,
你可以通过这个对象访问到用户所选择的文件.
该类型的对象还有可能来自用户的拖放操作.
参考:https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects
FormData
废话不多说,先上最后我用的完成版:完整实例版:
HTML<form id="fileform" enctype="multipart/form-data"> <input type='file' name='file'/><br/> <input type='submit' value='submit'/> </form>
JS
/*上传文件*/ document.querySelector("#fileform").addEventListener("submit", function(event) { var formdata=new FormData($("#fileform")[0]); $.ajax({ type : 'post', url :host+'/file/uploadFileLocal?xxxxxxxxxxxxxx',//地址改为后台给的上传地址 data : formdata, cache : false, processData : false, // 不处理发送的数据,因为data值是Formdata对象,不需要对数据做处理 contentType :false, // 不设置Content-type请求头 success : function(res){ if((res.code==200) && (res.payload == "success")) swal("","上传成功!","success") else{ swal("","上传失败","error") } }, error : function(x){ swal("","连接服务器失败","error") console.log('wrong:',x) } }) event.preventDefault(); })
然后是查找的资料~
概念:关于FormData
XMLHttpRequest Level 2添加了一个新的接口 ---- FormData利用FormData对象,可以通过js用一些键值对来模拟一系列表单控件,可以使用XMLHttpRequest的 send( ) 方法来异步提交表单与普通的ajax相比,使用FormData的最大优点就是可以异步上传二进制文件
FormData对象
FormData对象,可以把所有表单元素的name与value组成一个queryString,提交到后台。 在使用ajax提交时,使用FormData对象可以减少拼接queryString的工作量queryString是查询字符串,http查询字符串由url中?后面的值指定
当页面上的form以GET方式向页面发送请求数据时 (如数据含有不安全字符,则浏览器先将其转换成16进制的字符再传送,如空格被转换成%20时 ) ,web server 将请求数据放入一名为QUERY_STRING的环境变量中。 Request.QueryString 方法是从这一环境变量中取出相应的值,并将被转成16进制的字符还原
使用FormData上传文件、图片
创建一个FormData空对象,然后使用append方法添加key/value
var formdata=new FormData(); formdata.append ("name" , "张三");
如果已经有一个Form表单,取得form对象,作为参数传入FormData对象
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title></title> </head> <body> <form name="form1" id="form1"> <input id="file" type="file" name="name"></input> </form> <script type="text/javascript"> var form=document.getElementById("form1"); var formdata=new FormData(form); </script> </body> </html>
可以在已有表单数据的基础上,继续添加新的键值对
var formdata=new FormData();
var formdata=new FormData($("#form1").[0]);//获取文件法一 //var formdata=new FormData( ); //formdata.append("file" , $("#file")[0].files[0]);//获取文件法二 $.ajax({ type : 'post', url : '#', data : formdata, cache : false, processData : false, // 不处理发送的数据,因为data值是Formdata对象,不需要对数据做处理 contentType : false, // 不设置Content-type请求头 success : function(){} error : function(){ } })
formdata.append ("age" , "21");
使用FormData对象上传文件
var formdata=new FormData($("#form1").[0]);//获取文件法一
//var formdata=new FormData( );
//formdata.append("file" , $("#file")[0].files[0]);//获取文件法二
$.ajax({
type : 'post',
url : '#',
data : formdata,
cache : false,
processData : false, // 不处理发送的数据,因为data值是Formdata对象,不需要对数据做处理
contentType : false, // 不设置Content-type请求头
success : function(){}
error : function(){ }
})扩展:FileList
来自:https://developer.mozilla.org/zh-CN/docs/Web/API/FileList一个FileList对象通常来自于一个HTML input元素的files属性,
你可以通过这个对象访问到用户所选择的文件.
该类型的对象还有可能来自用户的拖放操作.
例子:
这个例子迭代了用户通过一个input元素选择的多个文件:// fileInput是一个 HTML input 元素: <input type="file" id="myfileinput" multiple> var fileInput = document.getElementById("myfileinput"); // files 是一个 FileList 对象(类似于NodeList对象) var files = fileInput.files; var file; //遍历所有文件 for (var i = 0; i < files.length; i++) { // 取得一个文件 file = files.item(i); // 这样也行 file = files[i]; // 取得文件名 alert(file.name); }
更完整的例子:
<!DOCTYPE HTML> <html> <head> </head> <body> // multiple属性可以让用户能选择多个文件 <input id="myfiles" multiple type="file"> </body> <script> var pullfiles=function(){ // 获取到input元素 var fileInput = document.querySelector("#myfiles"); var files = fileInput.files; // 获取到所选文件数量 var fl=files.length; var i=0; while ( i < fl) { var file = files[i]; alert(file.name); i++; } } // 设置change事件处理函数 document.querySelector("#myfiles").onchange=pullfiles; </script> </html>
相关文章推荐
- JS中使用FormData上传文件、图片的方法
- Swift使用Alamofire上传图片等FormData表单文件的方法
- vuejs使用FormData对象,ajax上传图片文件
- multipart/form-data图片上传实现方法(上传文件到Nimg)
- vuejs使用FormData对象,ajax上传图片文件
- JQuery Ajax使用FormData对象上传文件 图片
- javascript 使用FormData实现图片/文件异步上传
- 在tp3.2.3中使用 FormData 对象实现表单的文件上传功能遇到的一个问题及解决方法
- 关于使用jquery.form.js上传文件同时提交表单的方法
- jQuery Ajax使用FormData对象上传文件的方法
- php+html5使用FormData对象提交表单及上传图片的方法
- 使用jquery.form.js实现图片上传的方法
- JS FormData上传文件的设置方法
- ajax上传图片所用jquery.form.js插件详细使用方法
- asp.net文件上传用到html的file控件,在使用母版页Master,更改form的Enctype=multipart/form-data的方法
- 使用jquery.form.js上传图片或文件
- 通过Ajax使用FormData对象无刷新上传文件方法
- jQuery Ajax使用FormData对象上传文件的方法
- php+html5使用FormData对象提交表单及上传图片的方法
- 使用jquery.form.js实现图片上传的方法