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 相关文章推荐
JQUBAR1.1 jQuery 柱状图插件发布
Nov 28 Javascript
JS date对象的减法处理实现代码
Dec 28 Javascript
jqgrid 表格数据导出实例
Nov 21 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
Oct 26 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
Sep 06 Javascript
jQuery改变form表单的action,并进行提交的实现代码
May 25 Javascript
Node.js websocket使用socket.io库实现实时聊天室
Feb 20 Javascript
详解Angular 4.x Injector
May 04 Javascript
详解plotly.js 绘图库入门使用教程
Feb 23 Javascript
vue项目中使用Svg的方法
Oct 24 Javascript
微信小程序实现简单跑马灯效果
May 26 Javascript
Vue实现滑动拼图验证码功能
Sep 15 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/25 PHP
PHP MemCached高级缓存配置图文教程
2010/08/05 PHP
PHP的简易冒泡法代码分享
2012/08/28 PHP
使用php发送有附件的电子邮件-(PHPMailer使用的实例分析)
2013/04/26 PHP
php获取从百度搜索进入网站的关键词的详细代码
2014/01/08 PHP
PHP中模拟处理HTTP PUT请求的例子
2014/07/22 PHP
CodeIgniter连贯操作的底层原理分析
2016/05/17 PHP
laravel返回统一格式错误码问题
2019/11/04 PHP
jquery实现多行文字图片滚动效果示例代码
2014/10/10 Javascript
js读写json文件实例代码
2014/10/21 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
2014/12/08 Javascript
JavaScript 匿名函数和闭包介绍
2015/04/13 Javascript
纯javascript代码实现计算器功能(三种方法)
2015/09/07 Javascript
Angular directive递归实现目录树结构代码实例
2017/05/05 Javascript
Bootstrap响应式表格详解
2017/05/23 Javascript
Vue实战之vue登录验证的实现代码
2017/10/31 Javascript
jQuery实现表单动态加减、ajax表单提交功能
2018/06/08 jQuery
微信小程序实现单选功能
2018/10/30 Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
2020/05/19 jQuery
解决vscode进行vue格式化,会自动补分号和双引号的问题
2020/10/26 Javascript
pandas的唯一值、值计数以及成员资格的示例
2018/07/25 Python
Python实现时间序列可视化的方法
2019/08/06 Python
如何基于pythonnet调用halcon脚本
2020/01/20 Python
python入门之基础语法学习笔记
2020/02/08 Python
纯css3使用vw和vh实现自适应的方法
2018/02/09 HTML / CSS
美国南部最大的家族百货公司:Belk
2017/01/30 全球购物
艺龙旅行网酒店预订:国内、港澳台酒店
2018/06/26 全球购物
歌颂祖国演讲稿
2014/05/04 职场文书
常务副县长“四风”个人对照检查材料思想汇报
2014/10/02 职场文书
党员教师群众路线个人整改措施
2014/10/28 职场文书
先进单位事迹材料
2014/12/25 职场文书
2015年城市管理工作总结
2015/05/23 职场文书
四十年同学聚会致辞
2015/07/28 职场文书
Python实战之疫苗研发情况可视化
2021/05/18 Python
CSS中实现动画效果-附案例
2022/02/28 HTML / CSS
十大冰系宝可梦排名,颜值最高的阿罗拉九尾,第三使用率第一
2022/03/18 日漫