关于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. 关于android listview去掉分割线

    1.设置android:divider="@null" 2.android:divider="#00000000" #00000000后面两个零表示透明 3.. ...

  2. C# 自定义重绘TabControl

    using System.Drawing; using System.Windows.Forms; using System.Drawing.Drawing2D; using System.Runti ...

  3. WPF 之 布局（二）

    一.Canvas  Canvas是最基本的面板,只是一个存储控件的容器,它不会自动调整内部元素的排列及大小,它仅支持用显式坐标定位控件,它也允许指定相对任何角的坐标,而不仅仅是左上角.可以使用Left ...

  4. 快递鸟API接口调用代码示例（免费不限量）

    import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import ...

  5. iOS 应用程序的生命周期

    iOS 应用程序的生命周期(网络资源总结) http://blog.csdn.net/totogo2010/article/details/8048652 http://www.cocoachina. ...

  6. Java开发核心技术面试心得分析

    Java的数据结构有哪些?Map与Set的本质区别是什么? 分析:Java常见的数据结构有Collection和Map,其中Collection接口下包括List和Set接口,其下又有多个实现类如Li ...

  7. uva 12100 Printer Queue 优先级队列模拟题 数组模拟队列

    题目很简单,给一个队列以及文件的位置,然后一个一个检查,如果第一个是优先级最高的就打印,否则放到队列后面,求所要打印的文件打印需要花费多长时间. 这里我用数组模拟队列实现,考虑到最糟糕的情况,必须把数 ...

  8. linux_jvm_jmap_dump内存分析

    jmap命令   jmap命令 jmap命令可以获得运行中的jvm的堆的快照,从而可以离线分析堆,以检查内存泄漏,检查一些严重影响性能的大对象的创建,检查系统中什么对象最多,各种对象所占内存的大小等等 ...

  9. VMware系统运维（九）VMware vSphere Client 安装

    1.点击下一步 2.接受协议,下一步 3.选择安装位置,下一步 4.开始安装 5.安装完成,进行登录测试. VMware vsphere 5.1 登录名为administrator    VMware ...

  10. python 基础——generate生成器

    通过列表表达式可以直接生成列表,不过列表一旦生成就需要为所有元素分配内存,有时候会很消耗资源. 所以,如果列表元素可以按照某种算法推算出来,这样就不必创建完整的list,从而节省大量的内存空间. 在P ...