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 相关文章推荐
基于jQuery的日期选择控件
Oct 27 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
Sep 05 Javascript
jquery中change()用法实例分析
Feb 06 Javascript
jQuery制作效果超棒的手风琴折叠菜单
Apr 03 Javascript
Jquery实现遮罩层的方法
Jun 08 Javascript
window.onerror()的用法与实例分析
Jan 27 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
Dec 14 Javascript
浅谈Javascript中的Label语句
Dec 14 Javascript
Vue.2.0.5过渡效果使用技巧
Mar 16 Javascript
原生js轮播特效
May 18 Javascript
node.js使用yargs处理命令行参数操作示例
Feb 11 Javascript
Vue Elenent实现表格相同数据列合并
Nov 30 Vue.js
深入理解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
Protoss兵种对照表
2020/03/14 星际争霸
PHP安装问题
2006/10/09 PHP
Smarty foreach控制循环次数的实现详解
2013/07/03 PHP
推荐十款免费 WordPress 插件
2015/03/24 PHP
Jquery 常用方法经典总结
2010/01/28 Javascript
JavaScript 创建运动框架的实现代码
2013/05/08 Javascript
javascript将浮点数转换成整数的三个方法
2014/06/23 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
2015/01/08 Javascript
JavaScript中的prototype原型学习指南
2016/05/09 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
2017/08/17 Javascript
浅谈Vue父子组件和非父子组件传值问题
2017/08/22 Javascript
vue中配置mint-ui报css错误问题的解决方法
2017/10/11 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
2018/04/08 Javascript
Postman参数化实现过程及原理解析
2020/08/13 Javascript
python用字典统计单词或汉字词个数示例
2014/04/22 Python
跟老齐学Python之私有函数和专有方法
2014/10/24 Python
深入Python函数编程的一些特性
2015/04/13 Python
python保存字符串到文件的方法
2015/07/01 Python
python编写简单爬虫资料汇总
2016/03/22 Python
Python通过调用有道翻译api实现翻译功能示例
2018/07/19 Python
win7下python3.6安装配置方法图文教程
2018/07/31 Python
python 获取微信好友列表的方法(微信web)
2019/02/21 Python
python三大神器之fabric使用教程
2019/06/10 Python
Python多版本开发环境管理工具介绍
2019/07/03 Python
利用PyQt5+Matplotlib 绘制静态/动态图的实现代码
2020/07/13 Python
python归并排序算法过程实例讲解
2020/11/04 Python
Fossil美国官网:化石手表、手袋、首饰及配饰
2019/02/17 全球购物
100%法国制造的游戏和玩具:Les Jouets Français
2021/03/02 全球购物
日语专业个人的求职信
2013/12/03 职场文书
合作经营协议书
2014/04/17 职场文书
歌颂祖国演讲稿
2014/05/04 职场文书
先进个人推荐材料
2014/12/29 职场文书
生活小常识广播稿
2015/08/19 职场文书
公安纪律作风整顿心得体会
2016/01/23 职场文书
《秋天的图画》教学反思
2016/02/19 职场文书
python自动化测试之Selenium详解
2022/03/13 Python