关于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上传文件、图片

  1. 创建一个FormData空对象，然后使用append方法添加key/value

    var formdata=new FormData();
    
 formdata.append ("name" , "张三");
  2. 如果已经有一个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>   
  3. 可以在已有表单数据的基础上，继续添加新的键值对 
    var formdata=new FormData();
    
 formdata.append ("age" , "21");
  4. 使用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(){ }
    
              })

使用FormData上传文件、图片的更多相关文章

  1. （十）HttpClient以multipart/form-data上传文件

    原文链接:https://blog.csdn.net/wsdtq123/article/details/78888734 POST上传文件 最早的HTTP POST是不支持文件上传的,给编程开发带来很 ...

  2. FormData上传文件 带进度条

    * jQuery ajax  FormData 上传文件 template $.ajax({ url: url, type: 'POST', data: new FormData(form), dat ...

  3. 【2】通过Ajax方式上传文件(图片)，使用FormData进行Ajax请求

    HTML: <form id= "uploadForm"> <p >指定文件名: <input type="text" name= ...

  4. 基于spring-boot的web应用，ckeditor上传文件图片文件

    说来惭愧,这个应用调试,折腾了我一整天,google了很多帖子,才算整明白,今天在这里做个记录和分享吧,也作为自己后续的参考! 第一步,ckeditor(本博文论及的ckeditor版本4.5.6)的 ...

  5. FormData上传文件（input file）

    <div> <input type="file" name="FileUpload" id="FileUpload" va ...

  6. ASP.NET、JAVA跨服务器远程上传文件(图片)的相关解决方案整合

    一.图片提交例: A端--提交图片 protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { string u ...

  7. PHP socket上传文件图片

    最近了解了下下socket方面的东西,想做一个socket上传文件的例子. 在网上搜了搜代码执行后,图片数据传输了一半,图片的下半部分是灰色的.然后就自己仿着搜来的代码和php.net 中socket ...

  8. jQuery Ajax使用FormData上传文件和其他数据，后端web.py获取

    参考博文: 通过jQuery Ajax使用FormData对象上传文件 方法一:使用<form>表单初始化FormData对象方式上传文件 前端(JQuery): <form enc ...

  9. Ajax通过FormData上传文件

    1.使用<form>表单初始化FormData对象方式上传文件 HTML代码 <form id="uploadForm" enctype="multip ...

随机推荐

  1. Docker学习笔记2

    Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是完全使用沙箱机制,相互之间不会有任何 ...

  2. IOS 如何成为开发者&购买开发者账号 感想

    1.申请apple id  要注意 选择你在的国家 比如 China就会在右下角的页面出校圆圈的中国国旗,不然他们会说“无法接收你的请求”.我苦恼了半天,最后我重新申请apple ID 操作的,因为 ...

  3. Java基础知识强化之IO流笔记77：NIO之 Selector

    Selector(选择器)是Java NIO中能够检测一到多个NIO通道,并能够知晓通道是否为诸如读写事件做好准备的组件.这样,一个单独的线程可以管理多个channel,从而管理多个网络连接. 1.  ...

  4. Oracle 基础 —SQL语句优化的途径

    一:SQL语句的优化途径 1.选择合适的Oracle优化器 (1).RBO 基于规则进行优化的优化器   --Oracle 10G 后被抛掉 (2).CBO基于成本(CPU 和 内存的占用率)优化的优 ...

  5. SpringMVC 的 Controller 返回各种视图的处理方式

    SpringMVC 的 Controller 可以返回各种各样的视图.比如 JSP, JSON, Velocity, FreeMarker, XML, PDF, Excel, 还有Html字符流 等等 ...

  6. 20145102 《Java程序设计》第3周学习总结

    20145102 <Java程序设计>第3周学习总结 教材学习内容总结 以""包含的字符串,只要内容相同(序列,大小写相同),无论在程序代码中出现几次,都只会建立一个S ...

  7. Javascript函数（定义、传值、重载）

    Javascript 函数的定义的方式有不止一种. 第一种方式: function fn1(){ alert(typeof fn1); alert(“fn1”); } 在调用的时候直接就可以fu1() ...

  8. 剑指Offer36 数字在排序数组中出现的次数

    /************************************************************************* > File Name: 36_Number ...

  9. CentOS里下载百度网盘 / 360 网盘资源的方法

    wget -c --referer=引用地址 -O 文件名 "真实下载地址" 例如,我下载资源原在的页面为http://pan.baidu.com/s/1cfJXZ ,实际下载地址 ...

  10. 转: 微博的多机房部署的实践（from infoq）

    转:  http://www.infoq.com/cn/articles/weibo-multi-idc-architecture 在国内网络环境下,单机房的可靠性无法满足大型互联网服务的要求,如机房 ...