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事件列表解说
Dec 22 Javascript
JavaScript this调用规则说明
Mar 08 Javascript
JavaScript splice()方法详解
Sep 22 Javascript
jQuery中:visible选择器用法实例
Dec 30 Javascript
jQuery插件boxScroll实现图片轮播特效
Jul 14 Javascript
js游戏人物上下左右跑步效果代码分享
Aug 28 Javascript
angular2路由切换改变页面title的示例代码
Aug 23 Javascript
vue-cli构建项目使用 less的方法
Oct 04 Javascript
dropload.js插件下拉刷新和上拉加载使用详解
Oct 20 Javascript
详解node nvm进行node多版本管理
Oct 21 Javascript
微信小程序 确认框的实现(附代码)
Jul 23 Javascript
小程序中英文混合排序问题解决
Aug 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编码转换函数 自动转换字符集支持数组转换
2012/12/16 PHP
php生成rss类用法实例
2015/04/14 PHP
Zend Framework动作控制器用法示例
2016/12/09 PHP
整理一些JavaScript的IE和火狐的兼容性注意事项
2011/03/17 Javascript
jqPlot 基于jquery的画图插件
2011/04/26 Javascript
javascript学习笔记(八) js内置对象
2012/06/19 Javascript
js截取固定长度的中英文字符的简单实例
2013/11/22 Javascript
让checkbox不选中即将选中的checkbox不选中
2014/07/11 Javascript
jQuery截取指定长度字符串代码
2014/08/21 Javascript
jQuery设置和移除文本框默认值的方法
2015/03/09 Javascript
js由下向上不断上升冒气泡效果实例
2015/05/07 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
2015/05/20 Javascript
使用DNode实现php和nodejs之间通信的简单实例
2015/07/06 NodeJs
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
2015/08/21 Javascript
Jquery时间轴特效(三种不同类型)
2015/11/02 Javascript
浅谈jQuery 选择器和dom操作
2016/06/07 Javascript
微信小程序 网络API 上传、下载详解
2016/11/09 Javascript
js弹出窗口简单实现代码
2017/03/22 Javascript
使用D3.js制作图表详解
2017/08/13 Javascript
Webpack的dll功能使用
2018/06/28 Javascript
微信小程序实现默认第一个选中变色效果
2018/07/17 Javascript
利用vue3+ts实现管理后台(增删改查)
2020/10/30 Javascript
Python脚本实现自动发带图的微博
2016/04/27 Python
python模块之sys模块和序列化模块(实例讲解)
2017/09/13 Python
PyTorch基本数据类型(一)
2019/05/22 Python
美国网上花店:JustFlowers
2017/02/12 全球购物
Gap英国官网:Gap UK
2018/07/18 全球购物
美国按摩椅批发网站:Titan Chair
2018/12/27 全球购物
迪士尼西班牙官方网上商店:ShopDisney西班牙
2020/02/02 全球购物
网络安全方面的面试题
2015/11/04 面试题
2014年会策划方案
2014/05/11 职场文书
支行行长竞聘报告
2014/11/06 职场文书
会计求职简历自我评价
2015/03/10 职场文书
学校食堂食品安全承诺书
2015/04/29 职场文书
会议新闻稿
2015/07/17 职场文书
SpringBoot+VUE实现数据表格的实战
2021/08/02 Java/Android