关于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. JavaScript跨域实现

    最近在做个上传文件的服务,其中包含一个上传的web页面.目的是想客户端页面嵌套这个web页面,然后直接将文件上传到服务器. 因为文件不同所以需要保存到的文件夹名称也不一样,所以客户端需要传递一个文件夹 ...

  2. 再识C中的结构体

    在前面认识C中的结构体中我介绍了结构体的基础知识,下面通过这段代码来回顾一下: #include<stdio.h> #define LEN 20 struct Student{ //定义结 ...

  3. VS2005 命令窗口的使用

    转自:http://www.cnblogs.com/RobotH/archive/2008/05/29/1209856.html 命令”窗口用于直接在 Visual Studio 集成开发环境 (ID ...

  4. D. Powerful array 莫队算法或者说块状数组 其实都是有点优化的暴力

    莫队算法就是优化的暴力算法.莫队算法是要把询问先按左端点属于的块排序,再按右端点排序.只是预先知道了所有的询问.可以合理的组织计算每个询问的顺序以此来降低复杂度. D. Powerful array ...

  5. 通过改变uiview的layer的frame来实现进度条

    #import <UIKit/UIKit.h> @interface ProgressView : UIView @property(nonatomic,assign)CGFloat pr ...

  6. 结合源码看nginx-1.4.0之nginx模块组织结构详解

    目录 0. 摘要 1. nginx模块组织结构 2. nginx模块数据结构 3. nginx模块初始化 4. 一个简单的http模块 5. 小结 6. 参考资料 0. 摘要 nginx有五大优点:模 ...

  7. [PHP] htaccess 探秘

    .htaccess访问控制(Allow/Deny) 1. 验证是否支持.htaccess 在目录下新建一个.htaccess 文件,随笔输入一串字符(毫无意义),看看什么反应,如果是500错误,说明目 ...

  8. Android 高级UI设计笔记15：HorizontalScrollView之 实现画廊式图片浏览器

    1. HorizontalScrollView 本来,画廊式的图片浏览器,使用Android中的Gallery就能轻松完成,但是Google说Gallery每次切换图片时都要新建视图,造成太多的资源浪 ...

  9. iOS 10 的一些资料整理

    文/判若两人丶(简书作者)原文链接:http://www.jianshu.com/p/0cc7aad638d9 1.iOS 10 隐私权限设置 iOS 10 开始对隐私权限更加严格,如果你不设置就会直 ...

  10. Android开发 SDK NDK下载

    2014.7版本 ADT Bundle http://dl.google.com/android/adt/adt-bundle-windows-x86-20140702.ziphttp://dl.go ...