`
achun
  • 浏览: 313434 次
  • 性别: Icon_minigender_1
  • 来自: 河南郑州
社区版块
存档分类
最新评论

用 jQuery.ajax 基于 XMLHttpRequest,FormData 的表单上传

阅读更多

 XMLHttpRequest 已经推出很长时间了,W3C 对此引入了一些很好的特性,阮一峰有一篇很好的文章对此进行了汇总式的介绍 XMLHttpRequest Level 2 使用指南

在实际使用中排除那些落伍的浏览器,最简单的使用方法就是

  • 用标准的 HTML 语法生成 FORM 表单
  • hander 表单的 submit 事件,用 FormData 生成 XMLHttpRequest 提交数据,进行提交, 向submit 返回 false
  • 处理 XMLHttpRequest 结果

这样就完成了ajax方式的表单提交。当然这是支持文件上传 的。如果我们使用 jQuery.ajax 代码大概就是这个样子

$('yourform').submit(function(){
    var formdata=new FormData(this);
    $.ajax({
        type:'POST',
        url:'/yourpath',
        data:formdata,
        /**
         *必须false才会自动加上正确的Content-Type
         */
        contentType:false,
        /**
         * 必须false才会避开jQuery对 formdata 的默认处理
         * XMLHttpRequest会对 formdata 进行正确的处理
         */
        processData:false
    }).then(function(){
        //doneCal
    },function(){
        //failCal
    });
    return false;
});

标准之下就是这么简单。

有很多时候是可以要求用户使用现代浏览器的。比如对于编辑,对应定制的企业用户。

 

 

1
1
分享到:
评论

相关推荐

    jquery.from.js & juery.js

    6. **兼容性**:`jquery.form.js`支持多种提交方式,包括传统的POST和PUT,以及XMLHttpRequest Level 2的FormData。 在实际使用中,我们可以这样引入和使用这两个文件: ```html <script src="jquery.js"> ...

    使用 jQuery.ajax 上传带文件的表单遇到的问题

    然而在使用jQuery的ajax方法时,若需要上传文件,通常会使用FormData来封装表单数据。 问题之一是在使用jQuery.ajax上传文件时需要在ajax的参数中添加配置项processData: false。这是因为jQuery默认会对ajax方法中...

    jQuery-1.8.3(&2.1.4).min.js&jquery;.fileupload&jquery;.iframe-transport

    这种技术对于那些不支持FormData或XMLHttpRequest Level 2的浏览器尤其重要。 总结来说,jQuery库及其相关插件为开发者提供了强大的工具,使得前端开发变得更加便捷。jQuery-1.8.3和2.1.4版本代表了其在不同阶段的...

    jQuery的ajax中使用FormData实现页面无刷新上传功能

    接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方法和XMLHttpRequest Level 2的FormData接口。...

    struts2+jquery+ajax文件异步上传

    Struts2、jQuery和Ajax是Web开发中的三个关键组件,它们共同构成了文件异步上传的基础框架。这个项目是在MyEclipse环境下实现的一个简单的文件上传功能,让我们深入了解一下这些技术及其在文件上传中的应用。 首先...

    jquery+ajax上传解析文件

    在文件上传时,我们通常会使用XMLHttpRequest对象或者jQuery的$.ajax方法来创建异步请求,将文件数据发送到服务器。 JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于...

    jquery upload ajax方式

    本篇文章将深入探讨如何使用jQuery实现AJAX方式的文件上传,以及相关的核心知识点。 ### 1. jQuery与Ajax jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互等任务。Ajax...

    jquery与ajax调用,有代码 , 有说明,使ajax调用简单

    在"JQuery实战2:功能表单 - JQuery - AJAX - JavaEye论坛.files"这个压缩包中,可能包含了相关的代码示例和论坛讨论,你可以下载并参考这些资料,以便更好地理解和应用jQuery与Ajax的结合使用。 总结来说,jQuery...

    jQuery Ajax使用FormData对象上传文件的方法

    在现代Web开发中,文件上传是一项常见的功能,jQuery与Ajax结合使用FormData对象提供了一种高效、灵活的异步上传方式。FormData对象允许我们构建一个模拟的表单数据集,然后利用XMLHttpRequest对象发送这些数据,而...

    jquery+ajax文件上传

    本主题将深入探讨如何使用jQuery与AJAX技术实现文件上传,同时还能传递其他表单参数,以提高用户体验和数据处理的灵活性。 首先,jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax...

    jquery+ajax实现文件上传的js

    在Web开发中,jQuery与AJAX的结合使用广泛地用于创建动态、无刷新的用户体验,尤其是在文件上传场景中。本文将深入探讨如何利用jQuery和AJAX实现文件上传,并重点介绍`ajaxfileupload.js`这个jQuery插件。 首先,...

    jQ AJAX文件上传表单 jQuery AJAX文件上传表单代码下载.zip

    本教程将聚焦于使用jQuery库实现AJAX文件上传功能,这对于前端开发者来说是一个重要的技能。 首先,我们要理解HTML5引入了新的File API,使得在浏览器端处理文件变得更加容易。`<input type="file">`元素可以用来让...

    jquery实现的AJAX的一些例子

    在IT行业中,jQuery是一个广泛使用的JavaScript库,它极大地简化了DOM操作、事件处理以及Ajax交互。本主题将深入探讨如何利用jQuery实现AJAX技术,通过给出的实际例子来增强理解。 AJAX(Asynchronous JavaScript ...

    PHP+jQuery+Ajax多图片上传

    3. **AJAX请求**:当用户点击上传按钮,jQuery使用Ajax创建一个POST请求,将图片文件数据作为FormData对象发送到服务器。 4. **PHP处理**:服务器端的PHP脚本接收到数据后,检查图片的合法性(例如,大小、类型),...

    jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法

    通过上述知识点的介绍,可以看到在使用jQuery处理复杂的Ajax请求时,直接操作原生的XMLHttpRequest对象是如何实现的,以及FormData对象在此类场景中的重要性。在实际开发过程中,开发者应根据具体需求选择合适的方法...

    jquery.form.zip

    IE8不支持FormData对象和XMLHttpRequest Level 2的某些特性,这些特性在现代浏览器中被广泛用于处理文件上传。jQuery Form插件通过使用IFrame技术来解决这个问题。IFrame允许在后台加载内容,不会影响页面的正常渲染...

    ajax+jquery实现文件上传(详细注释)

    使用jQuery的`$.ajax()`方法发送Ajax请求,注意设置`type`为POST,`url`为服务器端处理文件上传的接口,`data`为我们的FormData对象,同时设置`processData`和`contentType`为`false`,以便正确处理文件数据: ...

    jQuery Ajax使用FormData上传文件和其他数据后端web.py获取

    与普通的 Ajax 相比,使用 FormData 的最大优点就是我们可以异步上传二进制文件。 jQuery 2.0+的版本支持FormData 方法一:使用<form>表单初始化FormData对象方式上传文件 •前端(JQuery): <form ...

Global site tag (gtag.js) - Google Analytics