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


Posted in Javascript onAugust 07, 2016

关于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上传文件、图片的方法的全部叙述,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言!

Javascript 相关文章推荐
javascript 正则替换 replace(regExp, function)用法
May 22 Javascript
jquery 多行滚动代码(附详细解释)
Jun 17 Javascript
关于javascript function对象那些迷惑分析
Oct 24 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
Dec 23 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
Aug 03 Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
Sep 04 Javascript
bootstrap滚动监控器使用方法解析
Jan 13 Javascript
node.js基础知识小结
Feb 26 Javascript
webpack4.x开发环境配置详解
Aug 04 Javascript
微信小程序自定义select下拉选项框组件的实现代码
Aug 28 Javascript
vue-自定义组件传值的实例讲解
Sep 18 Javascript
vue使用nprogress加载路由进度条的方法
Jun 04 Javascript
深入理解Angular2 模板语法
Aug 07 #Javascript
JS上传图片预览插件制作(兼容到IE6)
Aug 07 #Javascript
JavaScript兼容性总结之获取非行间样式案例
Aug 07 #Javascript
jQuery调用Webservice传递json数组的方法
Aug 06 #Javascript
Google 地图API Map()构造器详解
Aug 06 #Javascript
Google 地图API资料整理及详细介绍
Aug 06 #Javascript
jquery自动补齐功能插件flexselect用法示例
Aug 06 #Javascript
You might like
php匹配字符中链接地址的方法
2014/12/22 PHP
PHP实现的带超时功能get_headers函数
2015/02/10 PHP
Thinkphp5.0框架视图view的循环标签用法示例
2019/10/12 PHP
PHP调用QQ互联接口实现QQ登录网站功能示例
2019/10/24 PHP
javascript中&quot;/&quot;运算符常见错误
2010/10/13 Javascript
JavaScript入门之基本函数详解
2011/10/21 Javascript
cnblogs 代码高亮显示后的代码复制问题解决实现代码
2011/12/14 Javascript
js 自制滚动条的小例子
2013/03/16 Javascript
如何让DIV可编辑、可拖动示例代码
2013/09/18 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
2014/08/14 Javascript
jQuery中dom元素上绑定的事件详解
2015/04/24 Javascript
详解JavaScript中的blink()方法的使用
2015/06/08 Javascript
JS实现光滑展开合拢的菜单效果代码
2015/09/16 Javascript
jQuery EasyUI常用数据验证汇总
2016/09/18 Javascript
extjs简介_动力节点Java学院整理
2017/07/17 Javascript
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
2017/12/24 jQuery
快速解决vue-cli不能初始化webpack模板的问题
2018/03/20 Javascript
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
2019/11/07 jQuery
vue+Element-ui实现分页效果
2020/11/15 Javascript
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
Python内置的字符串处理函数整理
2013/01/29 Python
讲解python参数和作用域的使用
2013/11/01 Python
Python和Ruby中each循环引用变量问题(一个隐秘BUG?)
2014/06/04 Python
python list排序的两种方法及实例讲解
2017/03/20 Python
浅谈Python Opencv中gamma变换的使用详解
2018/04/02 Python
python中实现字符串翻转的方法
2018/07/11 Python
解决pytorch-yolov3 train 报错的问题
2020/02/18 Python
python属于软件吗
2020/06/18 Python
python调用百度API实现人脸识别
2020/11/17 Python
AmazeUI 面板的实现示例
2020/08/17 HTML / CSS
互动出版网:专业书籍
2017/03/21 全球购物
Habitat家居英国官方网站:沙发、家具、照明、厨房和户外
2019/12/12 全球购物
大学生第一学年自我鉴定2015
2014/09/28 职场文书
数学教师个人工作总结
2015/02/06 职场文书
读《钢铁是怎样炼成的》有感:百炼方成钢
2019/11/05 职场文书
面试中canvas绘制图片模糊图片问题处理
2022/03/13 Javascript