XMLHttpRequest.upload
在Firefox, Google Chrome and Safari中,如果通过XMLHttpRequest上传文件,
是可以通过监听XMLHttpRequest.upload对象的progress事件来查看进度的。
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", function (evt) {
// display uploading progress infomation...
});
xhr.upload在jQuery中消失了?
在看完JQuery最佳实践
后,
决定使用最新版本的jQuery 1.6.2替换一下正在使用的1.4.2,果然,性能在感觉上有提升。
可是悲剧的发现,怎么上传文件的进度不见了。调试发现,原来xhr.upload不见了。
查看jQuery的jqXHR
文档,
发现jqXHR不是XMLHttpRequest的简单扩展。
怎样才能拿到原始的XMLHttpRequest?
只要在$.ajax请求中拿到原始的XMLHttpRequest,然后监听upload对象的progress事件,就可以解决此问题了。
于是乎,为了拿到原始的XMLHttpRequest,我们需要写一小段代码。
根据jQuery.ajax
文档,xhr是可以自己提供的:
xhr: Function
Default: ActiveXObject when available (IE),
the XMLHttpRequest otherwise Callback for creating
the XMLHttpRequest object.
Defaults to the ActiveXObject when available (IE),
the XMLHttpRequest otherwise.
Override to provide your own implementation for
XMLHttpRequest or enhancements to the factory.
于是,我们就可以自己提供xhr,然后设置progress事件:
function onprogress(evt) {
// display uploading progress infomation...
};
var xhr_provider = function() {
var xhr = jQuery.ajaxSettings.xhr();
if(onprogress && xhr.upload) {
xhr.upload.addEventListener('progress', onprogress, false);
}
return xhr;
};
$.ajax({
url: url,
timeout: 5*60*1000,
type : 'post',
data: bb.getBlob(),
contentType: 'multipart/form-data; boundary=' + boundary,
processData: false,
xhr: xhr_provider,
success: function() {},
error: function() {}
});
分享到:
相关推荐
在本文中,我们将深入探讨jQuery实现的多文件上传功能,这是一种常见的前端技术,用于在Web应用中处理用户选择的多个文件。jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理以及Ajax交互,使得开发人员...
在本文中,我们将深入探讨如何使用JSP和jQuery实现一个简单的单选文件上传功能,并结合进度条显示上传进度。这是一个前端部分的实现,而后端部分需要根据实际项目需求自行完成。 首先,我们要明白JSP(JavaServer ...
在这里,我们将使用jQuery的Ajax方法来异步提交文件,同时利用XMLHttpRequest对象的onprogress事件监听文件上传的进度。当文件正在上传时,onprogress事件会被触发,我们可以从中获取已经传输的数据量,然后更新页面...
jQuery的Ajax方法可以监听文件上传的进度,通过`xhr.upload.onprogress`事件来更新进度条的状态。HTML部分可能包含一个表单和进度条元素: ```html <div id="progressBar"></div> 上传 ``` 在JavaScript中,...
针对“jQuery实现文件上传步骤引导代码”的主题,我们可以深入探讨如何使用jQuery来实现一个用户友好的文件上传功能,这通常涉及到前端与后端的交互,以及可能的进度指示和错误处理。 首先,我们需要理解文件上传的...
在网页开发中,多附件上传组件是不可或缺的功能之一,它允许用户一次性选择并上传多个文件。JQuery,作为一款广泛使用的JavaScript库,提供了方便的API和插件来实现这一功能。本文将深入探讨如何利用jQuery实现多...
在文件上传期间,我们可以使用CSS或jQuery动画来创建一个加载指示器。在`xhr`配置中添加一个事件监听器,根据上传进度更新加载指示器的状态。 ```javascript xhr: function() { var xhr = new window....
在文件上传的场景中,我们需要使用POST方法,因为GET方法通常有大小限制,不足以处理较大的文件。 **1. 创建HTML表单** 文件上传的第一步是创建一个包含文件输入字段的HTML表单。例如: ```html ...
在文件上传中,我们将利用jQuery的Ajax方法来实现异步上传,同时配合一个进度条插件来展示上传进度。 1. **前端实现**: - 使用HTML创建一个表单,包含文件输入元素和一个进度条元素。例如: ```html ...
在现代Web开发中,用户交互性是至关重要的,特别是在处理媒体内容如图片上传时。`jQuery`是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理以及Ajax交互,因此使用`jQuery`实现图片即时上传是一种常见且高效...
在文件上传场景中,通常使用`FormData`对象来封装文件数据,并通过Ajax的`xhr`对象的`send()`方法发送。 批量文件上传是通过HTML5的`multiple`属性来实现的,用户可以在文件选择对话框中选择多个文件。然后,这些...
1. JQUERY.AJAX没有监听上传进度的ONPROGRESS事件。 2. XMLHTTPREQUEST(XHR)跨域 问题解答 1. JQUERY没有给出ONPROGRESS事件的接口,必须从其他接口中找到原生XHR对象。 jQuery.ajax()返回的是jqXHR对象。jqXHR模仿...
在这个场景中,我们要讨论的是如何在上传文件时使用AJAX(Asynchronous JavaScript and XML)来实时展示文件上传的进度。这是一种提升用户体验的有效方法,因为它允许在不刷新整个页面的情况下与服务器进行交互。 ...
在.NET框架下,结合jQuery(jq)库,可以创建一个功能丰富的文件上传进度条,以提供用户友好的体验。在本文中,我们将深入探讨如何利用这两种技术实现这一功能,特别是批量上传。 首先,我们需要理解.NET中的文件...
jQuery 进度条是一种在网页上显示加载进度的可视化组件,常用于文件上传、数据处理或网络请求等场景,提供用户友好的交互体验。在jQuery库中,有一个名为`progressbar`的插件,用于创建这样的进度条效果。下面将详细...
在前端,我们可以使用jQuery、axios等库或者原生的JavaScript来监听xhr对象的progress事件,获取上传进度,并更新进度条UI。以下是一个使用jQuery的简单示例: ```javascript $("#uploadForm").submit(function...
xhr的`upload`事件监听上传进度,显示在页面的进度条上。 标签“源码”和“工具”提示我们关注代码实现和可能使用的辅助工具。在实际开发中,我们可能会用到Apache Commons IO库(如`CommonsMultipartFile`)来处理...
设置`xhr`参数以获取XMLHttpRequest对象,该对象具有`onprogress`事件,可以在文件上传过程中获取进度信息: ```javascript var formData = new FormData(this.files[0]); $.ajax({ url: 'upload.php', type: '...
在实际开发中,为了简化Ajax上传的复杂性,可以使用像jQuery、axios或fetch这样的库。例如,jQuery的`$.ajax()`或`$.post()`方法: ```javascript $.ajax({ url: 'upload.php', type: 'POST', data: formData, ...