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 相关文章推荐
小试JQuery的AutoComplete插件
May 04 Javascript
限制textbox或textarea输入字符长度的JS代码
Oct 16 Javascript
js鼠标及对象坐标控制属性详细解析
Dec 14 Javascript
js使用split函数按照多个字符对字符串进行分割的方法
Mar 20 Javascript
jQuery基于ID调用指定iframe页面内的方法
Jul 06 Javascript
JavaScript中Promise的使用详解
Feb 26 Javascript
js实现网页定位导航功能
Mar 07 Javascript
JS+html5制作简单音乐播放器
Sep 13 Javascript
bootstrap3-dialog-master模态框使用详解
Aug 22 Javascript
JS实现点击链接切换显示隐藏内容的方法
Oct 19 Javascript
JS实现二维数组元素的排列组合运算简单示例
Jan 28 Javascript
微信内置浏览器图片查看器的代码实例
Oct 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+JS无限级可伸缩菜单详解(简单易懂)
2007/01/02 PHP
使用PHP批量生成随机用户名
2008/07/10 PHP
C# Assembly类访问程序集信息
2009/06/13 PHP
frename PHP 灵活文件命名函数 frename
2009/09/09 PHP
YII中assets的使用示例
2014/07/31 PHP
PHP爬虫之百万级别知乎用户数据爬取与分析
2016/01/22 PHP
ThinkPHP的常用配置选项汇总
2016/03/24 PHP
js GridView 实现自动计算操作代码
2009/03/25 Javascript
Extjs学习笔记之三 extjs form更多的表单项
2010/01/07 Javascript
Jquery拖拽并简单保存的实现代码
2010/11/28 Javascript
href下载文件根据id取url并下载
2014/05/28 Javascript
node.js中的fs.readlinkSync方法使用说明
2014/12/17 Javascript
javascript批量修改文件编码格式的方法
2015/01/27 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
2017/01/06 Javascript
基于LayUI实现前端分页功能的方法
2017/07/22 Javascript
前端路由&amp;webpack基础配置详解
2019/06/10 Javascript
vue 获取及修改store.js里的公共变量实例
2019/11/06 Javascript
vue实现路由懒加载的3种方法示例
2020/09/01 Javascript
[01:45]典藏宝瓶2+祈求者身心——这就是DOTA2TI9总奖金突破3000万美元的秘密
2019/07/21 DOTA
Python中的is和id用法分析
2015/01/26 Python
python冒泡排序简单实现方法
2015/07/09 Python
使用Python对Csv文件操作实例代码
2017/05/12 Python
python实现周期方波信号频谱图
2018/07/21 Python
Python使用pickle模块报错EOFError Ran out of input的解决方法
2018/08/16 Python
python消除序列的重复值并保持顺序不变的实例
2018/11/08 Python
Python字符串逆序输出的实例讲解
2019/02/16 Python
Python 从attribute到property详解
2020/03/05 Python
Python小白垃圾回收机制入门
2020/06/09 Python
Python爬取微信小程序通用方法代码实例详解
2020/09/29 Python
python爬虫基础之urllib的使用
2020/12/31 Python
详解HTML5中rel属性的prefetch预加载功能使用
2016/05/06 HTML / CSS
美国最大的高尔夫发球时间预订网站:TeeOff.com
2018/03/28 全球购物
读书伴我成长演讲稿
2014/05/07 职场文书
村创先争优活动总结
2014/08/28 职场文书
2014年社区党建工作总结
2014/11/11 职场文书
小学五一劳动节活动总结
2015/02/09 职场文书