javascript jQuery 相当于 XMLHttpRequest 的上传？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5157361/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery equivalent to XMLHttpRequest's upload?
提问by metrobalderas
Working with HTML5's File API, the upload is made via an object called uploadin the XMLHttpRequest. Thisis the tutorial I'm working with (and the Google cache mirrorsince it's down at the moment). This is the relevant part:
与HTML5的File API工作，上传通过称为对象做出upload的XMLHttpRequest。这是我正在使用的教程（以及Google 缓存镜像，因为它目前已关闭）。这是相关部分：
// Uploading - for Firefox, Google Chrome and Safari
xhr = new XMLHttpRequest();
// Update progress bar
xhr.upload.addEventListener("progress", function (evt) {
As you can see, to track the upload progress, the XMLHttpRequestobject has a property named upload, which we can add an event handler.
如您所见，为了跟踪上传进度，该XMLHttpRequest对象有一个名为 的属性upload，我们可以添加一个事件处理程序。
My question is: has jQuery an equivalent?. I'm attempting to leave the code as clean as and cross-browser compatible as possible, for whenever Microsoft thinks it's a good idea (although it sounds like it will be in 2012 or 2013).
我的问题是：有 jQuery 等价物吗？. 我试图让代码尽可能干净和跨浏览器兼容，因为只要 Microsoft 认为这是一个好主意（尽管它听起来像是在 2012 或 2013 年）。
回答by Louis-Philippe Huberdeau
Here is what I came up with to get around the issue. The $.ajax() call allows to provide a callback to generate the XHR. I just generate one before calling the request, set it up and then create a closure to return it when $.ajax() will need it. It would have been much easier if they just gave access to it through jqxhr, but they don't.
这是我想出的办法来解决这个问题。$.ajax() 调用允许提供一个回调来生成 XHR。我只是在调用请求之前生成一个，设置它然后创建一个闭包以在 $.ajax() 需要它时返回它。如果他们只是通过 jqxhr 访问它会容易得多，但他们没有。
var reader = new FileReader();
reader.onloadend = function (e) {
var xhr, provider;
xhr = jQuery.ajaxSettings.xhr();
if (xhr.upload) {
xhr.upload.addEventListener('progress', function (e) {
// ...
}, false);
}
provider = function () {
return xhr;
};
// Leave only the actual base64 component of the 'URL'
// Sending as binary ends up mangling the data somehow
// base64_decode() on the PHP side will return the valid file.
var data = e.target.result;
data = data.substr(data.indexOf('base64') + 7);
$.ajax({
type: 'POST',
url: 'http://example.com/upload.php',
xhr: provider,
dataType: 'json',
success: function (data) {
// ...
},
error: function () {
// ...
},
data: {
name: file.name,
size: file.size,
type: file.type,
data: data,
}
});
};
reader.readAsDataURL(file);
回答by justkt
The documentationfor the jqXHR (the superset of the XMLHttpRequest that is returned from jQuery's .ajax() call) does not describe the update feature as being exposed, which does not mean it isn't exposed. This question, though, seems to indicate that upload is not exposed. The answer provides a way to get to the native XMLHttpRequest object.
jqXHR（从 jQuery 的 .ajax() 调用返回的 XMLHttpRequest 的超集）的文档没有将更新功能描述为公开，这并不意味着它没有公开。 不过，这个问题似乎表明上传没有公开。答案提供了一种获取本机 XMLHttpRequest 对象的方法。
In versions before jQuery 1.5 the XMLHttpRequest object was exposed directly, and so you can access any feature of it that the browser supports. This tutorialfor building a drag and drop uploader does just that.
在 jQuery 1.5 之前的版本中，XMLHttpRequest 对象是直接公开的，因此您可以访问浏览器支持的任何特性。 这个构建拖放上传器的教程就是这样做的。
A search for jquery html 5 file uploadbrings up this pluginto do multiple file upload using the HTML 5 file API, but this plugin does not currently work in IE. If you don't want to use HTML 5 and instead do want to have support cross-browser now, there are other plugins you can look into for jQuery on the jQuery plugin site.
搜索jquery html 5 file upload会显示此插件使用 HTML 5 文件 API 进行多文件上传，但此插件目前无法在 IE 中运行。如果您不想使用 HTML 5 而现在确实希望支持跨浏览器，那么您可以在 jQuery 插件站点上查看其他 jQuery 插件。
