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 相关文章推荐
Script标签与访问HTML页面详解
Jan 10 Javascript
jquery form 加载数据示例
Apr 21 Javascript
jQuery的几个我们必须了解的特点
May 03 Javascript
JavaScript的jQuery库中function的存在和参数问题
Aug 13 Javascript
深入浅析JavaScript函数前面的加号和叹号
Jul 09 Javascript
JavaScript实现数组降维详解
Jan 05 Javascript
JavaScript中最常见的三个面试题解析
Mar 04 Javascript
详解Vue生命周期的示例
Mar 10 Javascript
深入浅析vue组件间事件传递
Dec 29 Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
May 06 Javascript
JS实现Cookie读、写、删除操作工具类示例
Aug 28 Javascript
Node.js Stream ondata触发时机与顺序的探索
Mar 08 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调用三种数据库的方法(1)
2006/10/09 PHP
php 团购折扣计算公式
2011/11/24 PHP
使用 PHP Masked Package 屏蔽敏感数据的实现方法
2019/10/15 PHP
在浏览器窗口上添加遮罩层的方法
2012/11/12 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
2013/01/11 Javascript
整理JavaScript创建对象的八种方法
2015/11/03 Javascript
js滑动提示效果代码分享
2016/03/10 Javascript
纯js实现手风琴效果
2020/04/17 Javascript
用JS实现图片轮播效果代码(一)
2016/06/26 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
2016/12/17 Javascript
基于Vue实现timepicker
2017/04/25 Javascript
ReactNative实现图片上传功能的示例代码
2017/07/11 Javascript
javascript 跨域问题以及解决办法
2017/07/17 Javascript
微信小程序 POST请求的实例详解
2017/09/29 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
2018/10/09 Javascript
详解Python中列表和元祖的使用方法
2015/04/25 Python
Python cookbook(数据结构与算法)从字典中提取子集的方法示例
2018/03/22 Python
对Pandas MultiIndex(多重索引)详解
2018/11/16 Python
python随机在一张图像上截取任意大小图片的方法
2019/01/24 Python
基于Python实现ComicReaper漫画自动爬取脚本过程解析
2019/11/11 Python
使用python检查yaml配置文件是否符合要求
2020/04/09 Python
Python如何测试stdout输出
2020/08/10 Python
Python利用Pillow(PIL)库实现验证码图片的全过程
2020/10/04 Python
Python通过len函数返回对象长度
2020/10/22 Python
python使用正则表达式匹配txt特定字符串(有换行)
2020/12/09 Python
localStorage、sessionStorage使用总结
2017/11/17 HTML / CSS
日本著名的服饰鞋帽综合类购物网站:MAGASEEK
2019/01/09 全球购物
Rossignol金鸡美国官网:始于1907年法国百年雪具品牌
2019/03/06 全球购物
寄语十八大感言
2014/02/07 职场文书
文体活动实施方案
2014/03/27 职场文书
小学亲子活动总结
2014/07/01 职场文书
综合素质评价个性与发展自我评价
2015/03/06 职场文书
员工离职通知函
2015/04/25 职场文书
道歉短信大全
2015/05/12 职场文书
Redis 异步机制
2022/05/15 Redis
javascript进阶篇深拷贝实现的四种方式
2022/07/07 Javascript