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 提交和设置表单的值
Dec 19 Javascript
jquery tab插件制作实现代码
Jun 22 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
Jan 17 Javascript
JQuery设置和去除disabled属性的5种方法总结
May 16 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
Jan 14 Javascript
javascript作用域和闭包使用详解
Apr 25 Javascript
jquery中each方法示例和常用选择器
Jul 08 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
Mar 11 Javascript
jquery版轮播图效果和extend扩展
Jul 18 jQuery
Vue 滚动行为的具体使用方法
Sep 13 Javascript
vue.js的简单自动求和计算实例
Nov 08 Javascript
js实现Element中input组件的部分功能并封装成组件(实例代码)
Mar 02 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新手上路(六)
2006/10/09 PHP
php面向对象全攻略 (八)重载新的方法
2009/09/30 PHP
php下通过curl抓取yahoo boss 搜索结果的实现代码
2011/06/10 PHP
php使用Cookie控制访问授权的方法
2015/01/21 PHP
php简单smarty入门程序实例
2015/06/11 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
Laravel如何创建服务器提供者实例代码
2019/04/15 PHP
window.onbeforeunload方法在IE下无法正常工作的解决办法
2010/01/23 Javascript
mysql输出数据赋给js变量报unterminated string literal错误原因
2010/05/22 Javascript
jquery模拟按下回车实现代码
2011/09/20 Javascript
gridpanel动态加载数据的实例代码
2013/07/18 Javascript
node.js中的http.response.addTrailers方法使用说明
2014/12/14 Javascript
jQuery插件imgPreviewQs实现上传图片预览
2016/01/15 Javascript
基于d3.js实现实时刷新的折线图
2016/08/03 Javascript
原生js获取元素样式的简单方法
2016/08/06 Javascript
js 获取当前web应用的上下文路径实现方法
2016/08/19 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
2017/01/03 Javascript
微信小程序 devtool隐藏的秘密
2017/01/21 Javascript
jQuery中复合选择器简单用法示例
2018/03/31 jQuery
在vue中多次调用同一个定义全局变量的实例
2018/09/25 Javascript
如何检测JavaScript中的死循环示例详解
2020/08/30 Javascript
在Vue中获取自定义属性方法:data-id的实例
2020/09/09 Javascript
vue监听滚动事件的方法
2020/12/21 Vue.js
[01:20:05]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第二场 2月5日
2021/03/11 DOTA
不可错过的十本Python好书
2017/07/06 Python
Python代码块批量添加Tab缩进的方法
2018/06/25 Python
英国奢侈皮具品牌:Aspinal of London
2018/09/02 全球购物
俄罗斯品牌服装和鞋子在线商店:BRIONITY
2020/03/26 全球购物
乌克兰鞋类购物网站:Eobuv.com.ua
2020/11/28 全球购物
护理专业本科生自荐信
2013/10/01 职场文书
毕业生求职推荐信
2013/11/04 职场文书
打架检讨书范文
2015/01/27 职场文书
龙猫观后感
2015/06/09 职场文书
青年岗位能手事迹材料(2016推荐版)
2016/03/01 职场文书
Opencv实现二维直方图的计算及绘制
2021/07/21 Python
python神经网络 使用Keras构建RNN训练
2022/05/04 Python