`
FZtree
  • 浏览: 109667 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

form-ajax-post-while-file-upload-is-present

阅读更多

 


很久以前,form的post需要刷新页面。

后来有人发明了ajax,又有人开源了jquery,我们的form可以ajax post而无须刷新页面。
  var url, method, data, element = $('form');
    url = element.attr('action');
    method = element.attr('method');
    data = $(element[0].elements).serializeArray();
  $.ajax({
    url:url,
    type:method,
    data:data
  });
但存在一个问题,不支持带有文件上传的form。
  <form method="post" action="submit" enctype="multipart/form-data">
    <input type="file" name="file"/>
  </form>
因为,上传的文件对象无法被序列化。。。

这个问题需要新的DTD来解决,于是就有了FormData的对象。
  https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/FormData
  XMLHttpRequest Level 2添加了一个新的接口FormData
  利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,
  我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单",
  比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件。
  所有主流浏览器的较新版本都已经支持这个对象了,

  比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。
注意!需要设置ajax参数{cache:false,processData:false,contentType:false}

查看ajax的文档 http://www.w3school.com.cn/jquery/ajax_ajax.asp

于是我们又可以愉快地 form-ajax-post 了

  var url, method, data, element = $('form');
    url = element.attr('action');
    method = element.attr('method');
    data = new FormData(element[0]);
  $.ajax({

    cache:false,processData:false,contentType:false,
    url:url,
    type:method,
    data:data

  });

 

分享到:
评论

相关推荐

    ajax-axios-url-form-serialize 插件

    在处理表单数据时,我们常常需要将表单数据序列化以便于发送到服务器,这就是`ajax-axios-url-form-serialize`插件的作用。 `ajax-axios-url-form-serialize`插件专为Axios设计,用于将HTML表单数据转换成URL编码...

    c#下post multipart/form-data和JSON

    总结来说,C#提供了强大的工具来处理`multipart/form-data`和JSON数据的POST请求。无论是上传文件、发送复杂的业务数据还是两者结合,都可以通过`HttpClient`和相关辅助类轻松完成。在实际开发中,要根据具体需求...

    PB12.5 POST方式提交JSON或FORM-DATA到HTTP API

    Power Builder 12.5,使用ole MSXML2.ServerXMLHTTP方式,对接WEB API,以选用JSON和x-www-form-urlencoded方式提交数据,POST/GET方式均可。

    c#模拟post发送json和multipart/form-data格式

    在本主题中,我们将深入探讨如何使用C#来模拟POST请求,以便发送JSON和multipart/form-data格式的数据。这两种数据格式在现代网络应用中非常常见,特别是用于API交互和文件上传。 首先,让我们了解JSON(JavaScript...

    关于applicationx-www-form-urlencoded等字符编码的解释说明

    multipart/form-data是另一种常用的编码格式,它将窗体数据编码为一条消息,页上的每个控件对应消息中的一个部分。这种编码格式可以上传文件,并且可以处理复杂的数据结构。 在实际开发中,我们需要根据具体情况...

    multipartform-data 参数传递

    &lt;form method="POST" id='form2' name='form2' action="${weiboPublictUrl}" ENCTYPE="multipart/form-data"&gt; &lt;input type="file" name="uploadPath" id="uploadPath" size="62" maxlength="3"/&gt; ...

    Ajax-pardot-form-ajax-handler.zip

    Ajax-pardot-form-ajax-handler.zip,为salesforce pardot表单设置ajax提交,而不是使用iframe发布,并处理结果。,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它...

    C#使用multipart/form-data示例

    在IT行业中,网络通信是不可或缺的一部分,而上传文件或发送包含多个部分的数据通常涉及使用`multipart/form-data`编码方式。`multipart/form-data`是一种HTTP请求的Content-Type,它允许我们发送一个请求体,其中...

    c#实现HttpClient拼接multipart/form-data形式参数post提交数据

    使用c#实现的HttpClient拼接multipart/form-data形式参数post提交数据,包含图片内容,有需要的可以下载,希望能帮到有需要的人,

    feign-form-spring-3.8.0-API文档-中文版.zip

    赠送jar包:feign-form-spring-3.8.0.jar; 赠送原API文档:feign-form-spring-3.8.0-javadoc.jar; 赠送源代码:feign-form-spring-3.8.0-sources.jar; 赠送Maven依赖信息文件:feign-form-spring-3.8.0.pom; ...

    基于form-data请求格式详解

    具体来说,multipart/form-data格式的请求体由多个部分组成,每个部分前都有一个分隔符,该分隔符包括两部分:一长串随机生成的分隔符以及两个连续的减号。每个部分都会包含自己的Content-Disposition和Content-Type...

    Ajax-ajax-contact-form-wordpress.zip

    Ajax-ajax-contact-form-wordpress.zip,wordpress的联系人表单,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新加载...

    Laravel开发-laravel-form-ajax-validation

    `laravel-form-ajax-validation`项目正是关注这一主题,旨在教你如何在Laravel中实现异步的Ajax表单验证。 **1. Laravel Form Builder** Laravel的Form Builder提供了一种简洁的方式来创建HTML表单。它通过`\...

    form-generator项目集成方案.doc

    form-generator项目集成方案 form-generator项目集成方案是指将form-generator项目集成到本地项目中,以便实现表单可视化设计和生成表单代码的功能。该方案主要涉及到 Vue 项目的多页面结构、组件引入、样式文件...

    解决java enctype multipart form-data文件上传传值问题

    ### 解决Java enctype "multipart/form-data" 文件上传传值问题 在Java Web开发中,处理文件上传是一项常见的任务。特别是当涉及到使用`multipart/form-data`作为表单的编码类型时,这种需求更为突出。本文将深入...

    jquery.unobtrusive-ajax.rar

    比如`data-ajax="true"`启用Ajax处理,`data-ajax-url`指定请求的目标URL,`data-ajax-method`定义HTTP方法(GET或POST)等。 2. **事件处理**:库内部监听`ajaxStart`、`ajaxSend`、`ajaxSuccess`、`ajaxError`等...

    vue-ajax-form-component, 用于创建简单AJAX窗体的Vue.js 组件.zip

    vue-ajax-form-component, 用于创建简单AJAX窗体的Vue.js 组件 vue-ajax-form-component用于创建简单AJAX表单的 Vue.js 插件组件。安装通过npm作为 vue-ajax-form-component 可用。 或者作为 inline 脚本包括在 ...

    c#post multipart/form-data和JSON数据

    本篇文章将详细探讨如何在C#中处理`multipart/form-data`和JSON格式的数据。 `multipart/form-data`是HTTP协议中一种用于上传文件或发送复杂数据(如带有文件的表单数据)的Content-Type。在C#中,我们可以使用...

    login-form-using-ajax.rar_ajax form_ajax login_ajax login form

    在这个“login-form-using-ajax.rar”压缩包中,我们重点关注的是如何利用Ajax来创建一个动态的登录表单,实现用户在不刷新整个页面的情况下,后台校验用户名是否存在。 首先,让我们理解Ajax的核心概念。Ajax是一...

    C# http系列之以form-data方式上传多个文件及键值对集合到远程服务器

    首先,需要创建一个HttpWebRequest对象,并设置其Method属性为“POST”,ContentType属性为“multipart/form-data”。然后,使用StringBuilder类来构建请求的主体部分,包括边界、文件参数和键值对参数。最后,使用...

Global site tag (gtag.js) - Google Analytics