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入门——事件机制之事件中的冒泡现象示例解释
Sep 12 Javascript
教你用jquery实现iframe自适应高度
Jun 11 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
Jun 04 Javascript
js+html5操作sqlite数据库的方法
Feb 02 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
Jun 12 Javascript
webix+springmvc session超时跳转登录页面
Oct 30 Javascript
解决前端跨域问题方案汇总
Nov 20 Javascript
解决AngualrJS页面刷新导致异常显示问题
Apr 20 Javascript
薪资那么高的Web前端必看书单
Oct 13 Javascript
vue 表单之通过v-model绑定单选按钮radio
May 13 Javascript
JavaScript实现京东放大镜效果
Dec 03 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
Sep 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
php array_intersect比array_diff快(附详细的使用说明)
2011/07/03 PHP
php中使用base HTTP验证的方法
2015/04/20 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
TextArea设置MaxLength属性最大输入值的js代码
2012/12/21 Javascript
JavaScript中创建类/对象的几种方法总结
2013/11/29 Javascript
js简单的弹出框有关闭按钮
2014/05/05 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
2014/10/17 Javascript
js控制鼠标事件移动及移出效果显示
2014/10/19 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
2016/03/11 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
2016/05/05 Javascript
bootstrap实现动态进度条效果
2017/03/08 Javascript
Vue插件写、用详解(附demo)
2017/03/20 Javascript
JS+CSS实现滚动数字时钟效果
2017/12/25 Javascript
react实现换肤功能的示例代码
2018/08/14 Javascript
JavaScript事件发布/订阅模式原理与用法分析
2018/08/21 Javascript
JS实现炫酷轮播图
2020/11/15 Javascript
[03:43]2014DOTA2西雅图国际邀请赛 newbee战队巡礼
2014/07/07 DOTA
基础的十进制按位运算总结与在Python中的计算示例
2016/06/28 Python
python+requests+unittest API接口测试实例(详解)
2017/06/10 Python
解决python文件字符串转列表时遇到空行的问题
2017/07/09 Python
python+selenium select下拉选择框定位处理方法
2019/08/24 Python
使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例
2020/03/16 Python
Python tkinter实现简单加法计算器代码实例
2020/05/13 Python
Python连接Impala实现步骤解析
2020/08/04 Python
Ubuntu16安装Python3.9的实现步骤
2020/12/15 Python
CSS3 文字动画效果
2020/11/12 HTML / CSS
美国全球旅游运营商:Pacific Holidays
2018/06/18 全球购物
橄榄树药房:OLIVEDA
2019/09/01 全球购物
韩语专业本科生求职信
2013/10/01 职场文书
食品营养与检测应届生求职信
2013/11/08 职场文书
高中毕业自我鉴定
2013/12/19 职场文书
你有一份《诚信考试承诺书》待领取
2019/11/13 职场文书
帮你提高开发效率的JavaScript20个技巧
2021/06/18 Javascript
了解Redis常见应用场景
2021/06/23 Redis
使用CSS设置滚动条样式
2022/01/18 HTML / CSS
分析MySQL优化 index merge 后引起的死锁
2022/04/19 MySQL