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;
});
标准之下就是这么简单。
有很多时候是可以要求用户使用现代浏览器的。比如对于编辑,对应定制的企业用户。
分享到:
相关推荐
6. **兼容性**:`jquery.form.js`支持多种提交方式,包括传统的POST和PUT,以及XMLHttpRequest Level 2的FormData。 在实际使用中,我们可以这样引入和使用这两个文件: ```html <script src="jquery.js"> ...
然而在使用jQuery的ajax方法时,若需要上传文件,通常会使用FormData来封装表单数据。 问题之一是在使用jQuery.ajax上传文件时需要在ajax的参数中添加配置项processData: false。这是因为jQuery默认会对ajax方法中...
这种技术对于那些不支持FormData或XMLHttpRequest Level 2的浏览器尤其重要。 总结来说,jQuery库及其相关插件为开发者提供了强大的工具,使得前端开发变得更加便捷。jQuery-1.8.3和2.1.4版本代表了其在不同阶段的...
接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方法和XMLHttpRequest Level 2的FormData接口。...
Struts2、jQuery和Ajax是Web开发中的三个关键组件,它们共同构成了文件异步上传的基础框架。这个项目是在MyEclipse环境下实现的一个简单的文件上传功能,让我们深入了解一下这些技术及其在文件上传中的应用。 首先...
在文件上传时,我们通常会使用XMLHttpRequest对象或者jQuery的$.ajax方法来创建异步请求,将文件数据发送到服务器。 JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于...
本篇文章将深入探讨如何使用jQuery实现AJAX方式的文件上传,以及相关的核心知识点。 ### 1. jQuery与Ajax jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互等任务。Ajax...
在"JQuery实战2:功能表单 - JQuery - AJAX - JavaEye论坛.files"这个压缩包中,可能包含了相关的代码示例和论坛讨论,你可以下载并参考这些资料,以便更好地理解和应用jQuery与Ajax的结合使用。 总结来说,jQuery...
在现代Web开发中,文件上传是一项常见的功能,jQuery与Ajax结合使用FormData对象提供了一种高效、灵活的异步上传方式。FormData对象允许我们构建一个模拟的表单数据集,然后利用XMLHttpRequest对象发送这些数据,而...
本主题将深入探讨如何使用jQuery与AJAX技术实现文件上传,同时还能传递其他表单参数,以提高用户体验和数据处理的灵活性。 首先,jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax...
在Web开发中,jQuery与AJAX的结合使用广泛地用于创建动态、无刷新的用户体验,尤其是在文件上传场景中。本文将深入探讨如何利用jQuery和AJAX实现文件上传,并重点介绍`ajaxfileupload.js`这个jQuery插件。 首先,...
本教程将聚焦于使用jQuery库实现AJAX文件上传功能,这对于前端开发者来说是一个重要的技能。 首先,我们要理解HTML5引入了新的File API,使得在浏览器端处理文件变得更加容易。`<input type="file">`元素可以用来让...
在IT行业中,jQuery是一个广泛使用的JavaScript库,它极大地简化了DOM操作、事件处理以及Ajax交互。本主题将深入探讨如何利用jQuery实现AJAX技术,通过给出的实际例子来增强理解。 AJAX(Asynchronous JavaScript ...
3. **AJAX请求**:当用户点击上传按钮,jQuery使用Ajax创建一个POST请求,将图片文件数据作为FormData对象发送到服务器。 4. **PHP处理**:服务器端的PHP脚本接收到数据后,检查图片的合法性(例如,大小、类型),...
通过上述知识点的介绍,可以看到在使用jQuery处理复杂的Ajax请求时,直接操作原生的XMLHttpRequest对象是如何实现的,以及FormData对象在此类场景中的重要性。在实际开发过程中,开发者应根据具体需求选择合适的方法...
IE8不支持FormData对象和XMLHttpRequest Level 2的某些特性,这些特性在现代浏览器中被广泛用于处理文件上传。jQuery Form插件通过使用IFrame技术来解决这个问题。IFrame允许在后台加载内容,不会影响页面的正常渲染...
使用jQuery的`$.ajax()`方法发送Ajax请求,注意设置`type`为POST,`url`为服务器端处理文件上传的接口,`data`为我们的FormData对象,同时设置`processData`和`contentType`为`false`,以便正确处理文件数据: ...
与普通的 Ajax 相比,使用 FormData 的最大优点就是我们可以异步上传二进制文件。 jQuery 2.0+的版本支持FormData 方法一:使用<form>表单初始化FormData对象方式上传文件 •前端(JQuery): <form ...