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图片阅览组件
Nov 09 Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
Dec 28 Javascript
JavaScript实现同步于本地时间的动态时间显示方法
Feb 02 Javascript
JavaScript中清空数组的方法总结
Dec 02 Javascript
详解Vue中添加过渡效果
Mar 20 Javascript
protractor的安装与基本使用教程
Jul 07 Javascript
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
Oct 24 Javascript
vue实现商城购物车功能
Nov 27 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
Apr 03 Javascript
vue2.0 实现导航守卫(路由守卫)
May 21 Javascript
通过npm或yarn自动生成vue组件的方法示例
Feb 12 Javascript
javascript条件式访问属性和箭头函数介绍
Nov 17 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 和 MySQL 开发的 8 个技巧
2007/01/02 PHP
php导入excel文件到mysql数据库的方法
2015/01/14 PHP
PHP实现微信申请退款功能
2018/10/01 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
Js event事件在IE、FF兼容性问题
2011/01/01 Javascript
javascript针对DOM的应用实例(一)
2012/04/15 Javascript
动态读取JSON解析键值对的方法
2014/06/03 Javascript
jQuery AJAX timeout 超时问题详解
2016/06/21 Javascript
AngularJS使用ng-app自动加载bootstrap框架问题分析
2017/01/04 Javascript
angularJS1 url中携带参数的获取方法
2018/10/09 Javascript
详解JavaScript 浮点数运算的精度问题
2019/07/23 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
2019/07/25 jQuery
vue el-table实现自定义表头
2019/12/11 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
2019/12/16 Javascript
JS实现简单打字测试
2020/06/24 Javascript
关于vue的列表图片选中打钩操作
2020/09/09 Javascript
Openlayers学习之地图比例尺控件
2020/09/28 Javascript
python获取当前目录路径和上级路径的实例
2018/04/26 Python
Python错误处理操作示例
2018/07/18 Python
python爬虫爬取某网站视频的示例代码
2021/02/20 Python
Canvas与Image互相转换示例代码
2013/08/09 HTML / CSS
Gtech官方网站:地毯清洁器、吸尘器及园艺设备
2018/05/23 全球购物
阿里巴巴美国:Alibaba美国
2019/11/24 全球购物
请说出以下代码输出什么
2013/08/30 面试题
自荐书格式
2013/12/01 职场文书
青年创业培训欢迎词
2014/01/08 职场文书
机关门卫的岗位职责
2014/04/29 职场文书
企业仓管员岗位职责
2014/06/15 职场文书
小学感恩教育活动总结
2014/07/07 职场文书
法人委托书范本格式
2014/09/15 职场文书
重阳节标语大全
2014/10/07 职场文书
毕业设计论文评语
2014/12/31 职场文书
写给同学的新学期寄语
2015/02/27 职场文书
三好学生主要事迹材料
2015/11/03 职场文书
导游词之开封禹王台风景区
2019/12/02 职场文书
MySQL官方导出工具mysqlpump的使用
2021/05/21 MySQL