JS中使用FormData上传文件、图片的方法

更新时间：2016年08月07日 13:01:28 作者：谟风

这篇文章主要介绍了JS中使用FormData上传文件、图片的方法的相关资料,需要的朋友可以参考下

关于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();
 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(){ }
       })

以上所述是小编给大家介绍的JS中使用FormData上传文件、图片的方法的全部叙述，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言！

您可能感兴趣的文章:

JS平滑无缝滚动效果的实现代码
下面小编就为大家带来一篇JS平滑无缝滚动效果的实现代码。小编觉得挺不错的，现在分享给大家，也给大家做个参考
2016-05-05
javascript attachEvent和addEventListener使用方法
attachEvent与addEventListener区别适应的浏览器版本不同，同时在使用的过程中要注意
2009-03-03
JavaScript实现的选择排序算法实例分析
这篇文章主要介绍了JavaScript实现的选择排序算法,结合实例形式分析了选择排序的原理、实现步骤与相关操作技巧,需要的朋友可以参考下
2017-04-04
原生JS实现$.param() 函数的方法
这篇文章主要介绍了原生JS实现$.param() 函数的方法，由于遇到相关序列化的问题，但是vue项目中由于减少队jquery引用的限制，导致不能用$.param来序列化参数，下面小编给大家分享了实例代码，需要的朋友参考下吧
2018-08-08
JavaScript静态的动态
JavaScript静态的动态...
2006-09-09
JS匿名函数内部this指向问题详析
这篇文章主要给大家介绍了关于JS匿名函数内部this指向的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用JS具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-05-05
JavaScript中的this关键字用法详解
在编写JavaScript应用的时候，我们经常会使用this关键字。那么this关键字究竟是怎样工作的，它的设计有哪些好的地方，有哪些不好的地方，本文带大家全面系统地认识这个老朋友，感兴趣的小伙伴可以借鉴阅读
2023-05-05
jquery操作ul的一些操作笔记整理(干货)
下面小编就为大家带来一篇jquery操作ul的一些操作笔记整理(干货)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
js通过更改按钮的显示样式实现按钮的滑动效果
使用js实现按钮的滑动效果，通过更改按钮的显示样式，来实现按钮动态滑动,需要的朋友可以参考下
2014-04-04
CSS3+JavaScript实现翻页幻灯片效果
这篇文章主要介绍了CSS3+JavaScript实现翻页幻灯片效果,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-06-06