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 EasyUI API 中文文档 - Tabs标签页/选项卡
Oct 01 Javascript
IE与Firefox在JavaScript上的7个不同句法分享
Oct 30 Javascript
随窗体滑动的小插件sticky源码
Jun 21 Javascript
高效率JavaScript编写技巧整理
Aug 23 Javascript
javascript的事件触发器介绍的实现
Jun 05 Javascript
js获取会话框prompt的返回值的方法
Jan 10 Javascript
jQuery获取radio选中项的值实例
Jun 18 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
Jul 09 Javascript
js获取腾讯视频ID的方法
Oct 03 Javascript
十大热门的JavaScript框架和库
Mar 21 Javascript
JS实现的计数排序与基数排序算法示例
Dec 04 Javascript
js闭包学习心得总结
Apr 17 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
《神奇女侠:血脉》神力女超人大战犯罪公司
2020/04/09 欧美动漫
《DOTA3》开发工作已经开始 《DOTA3》将代替《DOTA2》
2021/03/06 DOTA
回答PHPCHINA上的几个问题:URL映射
2007/02/14 PHP
php中http_build_query 的一个问题
2012/03/25 PHP
PHP实现的ID混淆算法类与用法示例
2018/08/10 PHP
JavaScript入门学习书籍推荐
2008/06/12 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
2015/03/09 Javascript
详解vue之页面缓存问题(基于2.0)
2017/01/10 Javascript
JS正则替换去空格的方法
2017/03/24 Javascript
Vue的MVVM实现方法
2017/08/16 Javascript
在vue-cli项目中使用bootstrap的方法示例
2018/04/21 Javascript
Vue瀑布流插件的使用示例
2018/09/19 Javascript
jQuery选择器之基本选择器用法实例分析
2019/02/19 jQuery
vue路由跳转传参数的方法
2019/05/06 Javascript
ajax跨域访问遇到的问题及解决方案
2019/05/23 Javascript
JS/CSS实现字符串单词首字母大写功能
2019/09/03 Javascript
vue弹出框组件封装实例代码
2019/10/31 Javascript
python实现图片变亮或者变暗的方法
2015/06/01 Python
python实现多张图片拼接成大图
2019/01/15 Python
python使用正则筛选信用卡
2019/01/27 Python
PyQt打开保存对话框的方法和使用详解
2019/02/27 Python
Linux系统下升级pip的完整步骤
2021/01/31 Python
英国50岁以上人群的交友网站:Ourtime
2018/03/28 全球购物
网上快餐厅创业计划书
2014/02/01 职场文书
党员创先争优公开承诺书
2014/03/28 职场文书
小学生操行评语
2014/04/22 职场文书
《春雨》教学反思
2014/04/24 职场文书
毕业生找工作自荐书
2014/06/30 职场文书
小学校园文化建设汇报材料
2014/08/19 职场文书
工程索赔意向书
2014/08/30 职场文书
2015年宣传部工作总结范文
2015/03/31 职场文书
学校勤俭节约倡议书
2015/04/29 职场文书
采购部2015年度工作总结
2015/07/24 职场文书
Vue Element UI自定义描述列表组件
2021/05/18 Vue.js
《杜鹃的婚约》OP主题曲「凸凹」无字幕影像公开
2022/04/08 日漫
SQL试题 使用窗口函数选出连续3天登录的用户
2022/04/24 Oracle