jQuery等同于XMLHttpRequest的上载吗？

小编典典

jQuery等同于XMLHttpRequest的上载吗？

ajax

使用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) {

如您所见，为跟踪上传进度，该XMLHttpRequest对象具有一个名为的属性upload，我们可以添加一个事件处理程序。

我的问题是： jQuery是否等效？
。我试图让代码尽可能地干净和跨浏览器兼容，因为只要Microsoft认为这是一个好主意（尽管听起来好像是在2012年或2013年）。

阅读 228

2020-07-26

共1个答案

小编典典

这是我想出的解决此问题的方法。$ .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);

2020-07-26