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 相关文章推荐
js实现兼容IE6与IE7的DIV高度
May 13 Javascript
JavaScript中yield实用简洁实现方式
Jun 12 Javascript
js弹出的对话窗口永远保持居中显示
Dec 15 Javascript
JavaScript实现表格点击排序的方法
May 11 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
Jul 04 Javascript
CSS+jQuery实现简单的折叠菜单
Dec 20 Javascript
利用npm 安装删除模块的方法
May 15 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
May 17 Javascript
vue-cli项目使用mock数据的方法(借助express)
Apr 15 Javascript
微信小程序事件 bindtap bindinput代码实例
Aug 26 Javascript
vue基本使用--refs获取组件或元素的实例
Nov 07 Javascript
JavaScript实现音乐导航效果
Nov 19 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
取得单条网站评论以数组形式进行输出
2014/07/28 PHP
PHP人民币金额转大写实例代码
2015/10/02 PHP
4种PHP异步执行的常用方式
2015/12/24 PHP
js下用层来实现select的title提示属性
2010/02/23 Javascript
基于jQuery的消息提示插件之旅 DivAlert(三)
2010/04/01 Javascript
原生js拖拽(第一课 未兼容)拖拽思路
2013/03/29 Javascript
js Array对象的扩展函数代码
2013/04/24 Javascript
javascript解析xml实现省市县三级联动的方法
2015/07/25 Javascript
Jquery zTree 树控件异步加载操作
2016/02/25 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
2016/03/28 Javascript
如何通过js实现图片预览功能【附实例代码】
2016/03/30 Javascript
AngularJS中watch监听用法分析
2016/11/04 Javascript
原生js实现键盘控制div移动且解决停顿问题
2016/12/05 Javascript
jQuery事件详解
2017/02/23 Javascript
傻瓜式vuex语法糖kiss-vuex整理
2018/12/21 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
2019/02/22 Javascript
JS校验与最终登陆界面功能完整示例
2020/01/13 Javascript
Vue自定义render统一项目组弹框功能
2020/06/07 Javascript
[00:12]2018DOTA2亚洲邀请赛 Somnus丶M出阵单挑
2018/04/06 DOTA
在Python中封装GObject模块进行图形化程序编程的教程
2015/04/14 Python
Pycharm+Python+PyQt5使用详解
2019/09/25 Python
pytorch 数据处理:定义自己的数据集合实例
2019/12/31 Python
Old Navy加拿大官网:美式休闲服饰品牌
2017/09/26 全球购物
蔻驰意大利官网:COACH意大利
2019/01/16 全球购物
物业保安主管岗位职责
2013/12/25 职场文书
外企办公室竞聘演讲稿
2013/12/29 职场文书
新驾驶员个人自我评价
2014/01/03 职场文书
俄语专业职业生涯规划
2014/02/26 职场文书
公司经理任命书
2014/06/05 职场文书
反对四风问题自我剖析材料
2014/09/29 职场文书
班级光棍节联谊会策划书
2014/10/10 职场文书
2014年电话客服工作总结
2014/12/09 职场文书
拾金不昧表扬稿大全
2015/05/05 职场文书
少先大队干部竞选稿
2015/11/20 职场文书
小学秋季运动会通讯稿
2015/11/25 职场文书
国际最新研究在陨石中发现DNA主要成分 或由陨石带来地球
2022/04/29 数码科技