关于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. Blending(融合)

        Src Pixesl: 源像素 : 指的是当前光栅化产生的值     Dst Pixels 目标像素.指的是先前渲染存储在RT中的值     可以用来实现那些效果,诸如水,玻璃 以及其他的,( ...

  2. Joynet示例：知乎爬虫（搜索关键字相关回答，并下载其中的---图(mei)片(nv)）

    先贴爬虫程序下载地址:http://pan.baidu.com/s/1c2lxl1e 下载解压后 可直接运行 其中的 run.bat:或者你手动打开命令行执行:Joynet examples\Spid ...

  3. Oracle基础 TO_CHAR函数参考(转)

    Postgres 格式化函数提供一套有效的工具用于把各种数据类型(日期/时间,int,float,numeric)转换成格式化的字符串以及反过来从格式化的字符串转换成原始的数据类型. 注意:所有格式化 ...

  4. sql server小技巧-自动添加时间与主键自增长

    在敲机房收费系统的时候,遇到添加时间的时候总是通过vb端调用当前时间再添到sql server中,期间还有时因为添加时间格式的不统一导致一些小问题,现在才知道原来是自己孤陋寡闻,sql server ...

  5. VC++ UTF-8与GBK格式转换

    // 注释:多字节包括GBK和UTF-8 int GBK2UTF8(char *szGbk,char *szUtf8,int Len) { // 先将多字节GBK(CP_ACP或ANSI)转换成宽字符 ...

  6. OpenShare新功能@2014年第三季度

    新功能@2014第三季度 新增"多租户"的支持:巨型企业集团的私有云需要多租户模式,现在OpenShare可以从根本上完美支持 租户之间完全隔离,这是最高安全性 同时每个租户可以使 ...

  7. $(function(){})与$(document).ready(function(){})

    $(function(){ //jq ready()的简写 }); $(document).ready(function(){ // }); 或者: $().ready(function(){ //j ...

  8. Part 3 talking about constraint in sql

    What is Foreign key and how to create a Foreign key constraint? Note:Foreign Keys are used to enforc ...

  9. SQL Server 添加登录账户配置权限

    一.新建登录名 1. 在登录名右侧的文本框中输入新建的管理员账号名称:2. 一对单选按钮组中,选择Sql Server 身份验证,并输入登录密码:3. 勾选强制实施密码策略复选框:(密码策略一般是指加 ...

  10. ASP.NET XML与JSON

    第一章  ASP.NET XML与JSON 本章学习目标:主要理解DOM和XML,掌握.NET操作XML,DOM,理解json对象,并掌握ASP.NET中JSON的序列化和反序列化. 下面是ASP.N ...