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 相关文章推荐
window.addeventjs事件驱动函数集合addEvent等
Feb 19 Javascript
菜鸟javascript基础资料整理2
Dec 06 Javascript
Javascript查询DBpedia小应用实例学习
Mar 07 Javascript
jQuery中hide()方法用法实例
Dec 24 Javascript
JS实现的数组全排列输出算法
Mar 19 Javascript
jQuery EasyUI Dialog拖不下来如何解决
Sep 28 Javascript
Javascript中Date类型和Math类型详解
Feb 27 Javascript
JavaScript中removeChild 方法开发示例代码
Aug 15 Javascript
详解百度百科目录导航树小插件
Jan 08 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
Jan 11 Javascript
Javascript查看大图功能代码实现
May 07 Javascript
基于JS实现计算24点算法代码实例解析
Jul 23 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 的 __FILE__ 常量
2007/01/15 PHP
PHP之短标签开启设置
2013/06/17 PHP
destoon二次开发常用数据库操作
2014/06/21 PHP
PHP函数nl2br()与自定义函数nl2p()换行用法分析
2016/04/02 PHP
php 计算两个时间相差的天数、小时数、分钟数、秒数详解及实例代码
2016/11/09 PHP
PHP生成唯一ID之SnowFlake算法
2016/12/17 PHP
PHP实现微信退款功能
2018/10/02 PHP
模拟jQuery ajax服务器端与客户端通信的代码
2011/03/28 Javascript
window.open以post方式将内容提交到新窗口
2012/12/26 Javascript
Jquery实现显示和隐藏的4种简单方式
2013/08/28 Javascript
JavaScript面向对象编程入门教程
2014/04/16 Javascript
javascript函数式编程实例分析
2015/04/25 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
2020/12/13 Javascript
JavaScript判断变量是否为数组的方法(Array)
2016/02/24 Javascript
java中String类型变量的赋值问题介绍
2016/03/23 Javascript
jQuery中Nicescroll滚动条插件的用法
2016/11/10 Javascript
angular 动态组件类型详解(四种组件类型)
2017/02/22 Javascript
JavaScript中Promise的使用详解
2017/02/26 Javascript
H5基于iScroll实现下拉刷新和上拉加载更多
2017/07/18 Javascript
详解React 16 中的异常处理
2017/07/28 Javascript
javascript 易错知识点实例小结
2020/04/25 Javascript
微信小程序调用后台service教程详解
2020/11/06 Javascript
Python小工具之消耗系统指定大小内存的方法
2018/12/03 Python
Python-Seaborn热图绘制的实现方法
2019/07/15 Python
Python编写带选项的命令行程序方法
2019/08/13 Python
解决pycharm中导入自己写的.py函数出错问题
2020/02/12 Python
Django框架安装及项目创建过程解析
2020/09/14 Python
基于python获取本地时间并转换时间戳和日期格式
2020/10/27 Python
菲律宾酒店预订网站:Hotels.com菲律宾
2017/07/12 全球购物
法国足球商店:Footcenter
2019/07/06 全球购物
Clos19英国:高档香槟、葡萄酒和烈酒在线购物平台
2020/07/10 全球购物
Penhaligon’s英国官网:成立于1870年的英国香水制造商
2021/02/18 全球购物
汉语专业毕业生自荐信
2014/07/06 职场文书
小学三好学生事迹材料
2014/08/15 职场文书
医院党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
【DOTA2】高能暴走TK秀!PSG LGD vs ASTER - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA