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 相关文章推荐
stream.js 一个很小、完全独立的Javascript类库
Oct 28 Javascript
jquery图片切换实例分析
Apr 15 Javascript
JavaScript Split()方法
Dec 18 Javascript
不同js异步函数同步的实现方法
May 28 Javascript
jQuery获取浏览器类型和版本号的方法
Jul 05 Javascript
JS中的BOM应用
Feb 02 Javascript
JavaScript中的一些实用小技巧总结
Apr 07 Javascript
使用layer模态框给新页面传值的方法
Sep 27 Javascript
vue 组件间的通信之子组件向父组件传值的方式
Jul 29 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
Jul 31 Javascript
js中实现继承的五种方法
Jan 25 Javascript
vue+elementUI实现表格列的显示与隐藏
Apr 13 Vue.js
深入理解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
基于mysql的论坛(2)
2006/10/09 PHP
PHP实现简单搜歌的方法
2015/07/28 PHP
php版微信公众平台开发之验证步骤实例详解
2016/09/23 PHP
删除PHP数组中头部、尾部、任意元素的实现代码
2017/04/10 PHP
Yii框架批量插入数据扩展类的简单实现方法
2017/05/23 PHP
PHP实现的简单操作SQLite数据库类与用法示例
2017/06/19 PHP
PHP __call()方法实现委托示例
2019/05/20 PHP
Laravel5.1 框架Middleware中间件基本用法实例分析
2020/01/04 PHP
JavaScript 快捷键设置实现代码
2009/03/13 Javascript
js函数的引用, 关于内存的开销
2012/09/17 Javascript
使用纯javascript实现放大镜效果
2015/03/18 Javascript
jquery中toggle函数交替使用问题
2015/06/22 Javascript
javascript实现密码验证
2015/11/10 Javascript
PassWord输入框代码分享
2016/06/07 Javascript
javascript代码调试之console.log 用法图文详解
2016/09/30 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
2016/12/18 Javascript
angularJS之$http:与服务器交互示例
2017/03/17 Javascript
详解vue表单验证组件 v-verify-plugin
2017/04/19 Javascript
Vue.js如何实现路由懒加载浅析
2017/08/14 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
2018/09/05 Javascript
小程序云函数调用API接口的方法
2019/05/17 Javascript
详解ES6 export default 和 import语句中的解构赋值
2019/05/28 Javascript
基于python3 的百度图片下载器的实现代码
2019/11/05 Python
Python调用钉钉自定义机器人的实现
2020/01/03 Python
python nohup 实现远程运行不宕机操作
2020/04/16 Python
完美解决IE8下不兼容rgba()的问题
2017/03/31 HTML / CSS
寻找完美的房车租赁:RVShare
2019/02/23 全球购物
会计求职自荐信
2014/06/20 职场文书
企业安全生产目标责任书
2014/07/23 职场文书
2014年小学生迎国庆65周年演讲稿
2014/09/27 职场文书
入学证明
2015/06/23 职场文书
2016年秋季趣味运动会开幕词
2016/03/04 职场文书
导游词之吉林花园山
2019/10/17 职场文书
Python中的 Set 与 dict
2022/03/13 Python
Python中的matplotlib绘制百分比堆叠柱状图,并为每一个类别设置不同的填充图案
2022/04/20 Python
使用 Docker Compose 构建复杂的多容器App
2022/04/30 Servers