关于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图片滚动切换效果

    下载源码 技术要点:  1.图片滚动切换技术 2.详细的源码注释 ...... 详细介绍: 1.图片滚动切换技术 本套源码实现了类似于网站图片滚动推广效果,效果不错,很不错的参考源码 2.源码目录 运 ...

  2. php手册总结《安装与配置》

    一:web服务器与php解释器的连接方式 有两个方法将 PHP 连接到服务器上. 1>通过SAPI模块来连接 对于很多服务器,PHP 均有一个直接的模块接口(也叫做 SAPI).这些服务器包括 ...

  3. 用PredicateBuilder实现Linq动态拼接查询

    在使用Linq查询的时候,特别是如果你在使用Entiry Framwork,有时会遇到动态查询的情况(客户的查询条件是不固定的拼接查询).我们能想到的第一方案应该是拼接SQL,的确这样是可以达到我们的 ...

  4. excel 批量替换换行符

    在excel批量替换换行符操作步骤: 全选需要查找换行符的范围 CTRL+H调出查找和替换 在查找内容内输入"ctrl+enter"两个组合键 点击查找全部即可. 在excel中输 ...

  5. eclipse[downloads]

    下载J2EE:http://www.eclipse.org/downloads/ 下载WPT插件:http://download.eclipse.org/webtools/updates 下载TOMC ...

  6. 1.4.7 Schema API

    Schema API Schema API允许使用REST API每个集合(collection)(或者单机solr的核(core)).包含了定义字段类型,字段,动态字段,复制字段等.在solr4.2 ...

  7. solrj-solr Guide 4.7

    solrj是一个很容易使java应用程序和solr进行交互的一个API,solrj隐藏了很多连接Solr的细节,允许你的应用程序使用简单的高级方法和solr互动交流. solrj的核心就是 org.a ...

  8. iOS系统下 的手机屏幕尺寸 分辨率 及系统版本 总结

    今天  我对iOS系统下 的手机屏幕尺寸 分辨率 及系统版本做了一次系统总结 供大家参考. 首先 是系统:    随着iOS 系统不断升级,现在已经到iOS7.0了, 并且TA有了很多新变化,最震撼的 ...

  9. Android 高级UI设计笔记21：Android SegmentView（分段选择控件）

    1. 分段控制(SegmentView) 首先我们先看看什么是SegmentView的效果,如下: 分段控制这个View控件是ios7的分段控制,和QQ消息页面顶部的效果一样,android没有这个控 ...

  10. 【Android Studio使用教程2】Android Studio创建项目

    创建项目 首先,先指出Android Studio中的两个概念. Project 和 Module .在Android Studio中, Project 的真实含义是工作空间, Module 为一个具 ...