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 判断脚本加载完毕的代码
Jul 13 Javascript
jQuery实现表头固定效果的实例代码
May 24 Javascript
自写的jQuery异步加载数据添加事件
May 15 Javascript
javascript实现点击后变换按钮显示文字的方法
May 13 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
Oct 10 Javascript
详解Angular 4.x 动态创建组件
Apr 25 Javascript
react-native使用react-navigation进行页面跳转导航的示例
Sep 07 Javascript
讲解vue-router之什么是嵌套路由
May 28 Javascript
微信小程序canvas实现刮刮乐效果
Jul 09 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
Sep 03 Javascript
Vue-cli 移动端布局和动画使用详解
Aug 10 Javascript
js用正则表达式筛选年月日的实例方法
Jan 04 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
数据库相关问题
2006/10/09 PHP
php+mysql实现无限级分类 | 树型显示分类关系
2006/11/19 PHP
Thinkphp搜索时首页分页和搜索页保持条件分页的方法
2014/12/05 PHP
分享PHP计算两个日期相差天数的代码
2015/12/23 PHP
php中mkdir()函数的权限问题分析
2016/09/24 PHP
JavaScript 中的事件教程
2007/04/05 Javascript
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
2009/10/25 Javascript
JavaScript 学习笔记(六)
2009/12/31 Javascript
js 绑定带参数的事件以及手动触发事件
2010/04/27 Javascript
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
2013/01/24 Javascript
jquery获取tagName再进行判断
2014/05/29 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
2015/08/27 Javascript
分享经典的JavaScript开发技巧
2015/11/21 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
2016/10/28 Javascript
AngularJS入门教程之数据绑定用法示例
2016/11/01 Javascript
webuploader模态框ueditor显示问题解决方法
2016/12/27 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
2018/05/03 Javascript
JavaScript继承定义与用法实践分析
2018/05/28 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
2018/10/25 Javascript
vue中nextTick用法实例
2019/09/11 Javascript
关于layui flow loading占位图的实现方法
2019/09/21 Javascript
jQuery实现鼠标移入显示蒙版效果
2020/01/11 jQuery
用vue写一个日历
2020/11/02 Javascript
Python爬虫设置代理IP的方法(爬虫技巧)
2018/03/04 Python
对django views中 request, response的常用操作详解
2019/07/17 Python
TensorFlow获取加载模型中的全部张量名称代码
2020/02/11 Python
OpenCV中VideoCapture类的使用详解
2020/02/14 Python
利用Python制作动态排名图的实现代码
2020/04/09 Python
localStorage 设置过期时间的方法实现
2018/12/21 HTML / CSS
加拿大时装零售商:Influence U
2018/12/22 全球购物
HomeAway英国:全球领先的度假租赁在线市场
2020/02/03 全球购物
简单通用的简历自我评价
2014/09/21 职场文书
派出所副所长四风问题个人整改措施思想汇报
2014/10/13 职场文书
2016年小学植树节活动总结
2016/03/16 职场文书
2016年百日安全生产活动总结
2016/04/06 职场文书
2019交通安全宣传标语集锦!
2019/06/28 职场文书