Question

我试图将this对象作为参数从ajax xhr传递给外部函数，但它似乎无效。以下是我的代码。

  $(document).on("click", "#imgform_submit", function (e) {
    e.preventDefault();

    var thiss = $(this);          //  $(this)  object
    var href = window.location.href;
    var form_id = href.substr(href.lastIndexOf('/') + 1);
    var formData = new FormData($("form#imgform")[0]);
    $.ajax({
        url: base_url + "index.php/init/add_img/" + form_id,
        type: 'POST',
        data: formData,
        async: true,
        cache: false,
        contentType: false,
        processData: false,
        xhr: function () {  // custom xhr
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) { // Check if upload property exists
                myXhr.upload.addEventListener('progress', progressHandler(thiss), false);// For handling the progress of the upload
            }
            return myXhr;
        },
        success: function (data) {
            if(data == "true"){
                 $("#file_upload_container").html("<div class='msg'>File Successfully Uploaded</div>");
             }

        },
        complete: function () { //     
        }

    });

});

progressHandler

 function progressHandler(e, thiss) {
    $(thiss).hide();     //this line is not working.
    var progress = document.getElementById('progress');
    //  var status = document.getElementById('status');
    var percent = (e.loaded / e.total) * 100;
    percent = Math.round(percent);
    progress.style.width = Math.round(percent) + '%';
    //  status.innerHTML = percent + '% completed.';
}

上面我将this作为参数传递给函数progressHandler并尝试访问它。我没工作。帮助我。

被修改

我忘了提一件事。从jquery代码触发#imgform_submit按钮：

$(document).on("click", ".uploadimg", function (e) {
    e.preventDefault();

    var filebrowser = $(this).prev().prev(".uploadContainer").children("#file_browser");
    var inputfile = filebrowser.children('.upload');
    if (inputfile.val() == '') {
        alert("Please select file before uploading.");
    } else {
        $("#imgform").prepend(filebrowser);
        $("#imgform_submit").trigger("click");
    }
});

现在我想将this按钮的.uploadimg对象传递给#imgform_submit函数，类似于progressHanlder函数。最后，progressHanlder应该能够使用this的{{1}}对象。我试过了。

.uploadimg

并且

 $(document).on("click", ".uploadimg", function (e) {
   //some code
 $("#imgform_submit").trigger("click", $(this));

上面我写的是捷径。 $(document).on("click", "#imgform_submit", function (e, thiss) { $(thiss).hide(); // .uploadimg button is hidden here. works well. myXhr.upload.addEventListener('progress', progressHandler(thiss), false); //passing thiss object of .uploadimg to progressHandler }); function progressHandler(e, thiss) { $(thiss).hide(); //it didnot worked here. }) .uploadimg对象现在无法在this函数中运行。如何克服这种情况。

Answer 1

似乎在

处调用progressHandler函数

myXhr.upload.addEventListener('progress', progressHandler(thiss), false)

尝试使用.bind()

myXhr.upload.addEventListener('progress', progressHandler.bind(e.target), false)

在progressHandler删除thiss作为参数，使用$(this)作为选择器

function progressHandler(e) {
    $(this).hide();     //this line is not working.
    var progress = document.getElementById('progress');
    //  var status = document.getElementById('status');
    var percent = (e.loaded / e.total) * 100;
    percent = Math.round(percent);
    progress.style.width = Math.round(percent) + '%';
    //  status.innerHTML = percent + '% completed.';
}

Answer 2

问题是，您没有将方法progressHandler传递给事件侦听器。你正在做的是使用yoiur this对象作为第一个参数执行方法，并使用执行的返回值（undefined）作为事件监听器的回调。

您可以用来解决此问题的是一个匿名函数，它可以执行您需要的功能：

myXhr.upload.addEventListener('progress', function (e) {
    progressHandler.call(thiss, e);
}, false);

所以你要做的是将一个函数传递给执行你的progressHandler的侦听器，同时将thiss作为this对象传递，e作为第一个参数。

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Function/call

将此对象传递给xhr函数jquery

2 个答案: