Jquery fileupload库没有调用onchange函数

时间:2016-01-20 05:11:25

标签: javascript php jquery file-upload jquery-file-upload

我使用Jquery fileupload库(blue emp,https://blueimp.net)来上传文件 我在每一行都有包含fileupload控件的表。

<table id="recordTable" class="table table-bordered table-striped">
                    <thead>
                        <tr>                    
                            <th>Question Number</th>
                            <th>Question Text</th>
                            <th>Supported Document</th>
                            <th>File Upload Status</th>                                 
                            <th>Delete</th>
                        </tr>                       
                    </thead>

                    <tbody>
                            <tr>
                                <td class="ques_id">17</td>
                                <td class="ques_text">asddsf</td>
                                <td class="ques_file"><input type="file" name="supportingDocument" accept="application/pdf" id="uploadSupportingDoc"></td>
                                <td class="fileuploadSuccess"></td>                                 
                                <td><a href="#" id="deleteButton" class="btn btn-primary">delete</a></td>
                            </tr>

                            <tr>
                                <td class="ques_id">18</td>
                                <td class="ques_text">dfgdfg</td>
                                <td class="ques_file"><input type="file" name="supportingDocument" accept="application/pdf" id="uploadSupportingDoc"></td>
                                <td class="fileuploadSuccess"></td>                                 
                                <td><a href="#" id="deleteButton" class="btn btn-primary">delete</a></td>
                            </tr>

                    </tbody>
                </table>

文件上传的Onchange事件,我在这里做的是发送第一列的数据,即questionId(它的唯一id列)

$('#uploadSupportingDoc').on("change", function(){ 
   console.log("on change called!");
   var questionId = $(this).parent().siblings(":first").text(); 

   console.log("fileUpload called with Id =>"+questionId);
   uploadFile(questionId); 
});

asdsad

function uploadFile(questionId) {


 $('#uploadSupportingDoc').fileupload({
    url: 'uploadSupportingDoc.html',
    formData: {questionId: questionId },
    acceptFileTypes: /(\.|\/)(jpe?g)$/i,
    maxFileSize: 100,
    dropZone: null,
    pasteZone: null,
    fileInput: $(this),
    dataType: 'json',
    add: function(e, data){
             $(this).closest('tr').children('td.fileuploadSuccess').html('<img src="./img/ajax-loader.gif" alt="Uploading..." />');
           data.submit();
    },
    done: function (e, data){
        var response = data.result.files[0];
        console.log("done");
        if(!response.isRequestValid)
        {
            window.location = "requestDenied.html";
        }
        else
        {

            if(response.status)
            {

                $(this).closest('tr').children('td.fileuploadSuccess').html("<span class=\"glyphicon glyphicon-ok\" aria-hidden=\"true\"></span>")

            }
            else
            {
                $(this).parent().siblings().find(".fileuploadSuccess").html("<span class=\"glyphicon glyphicon-remove\" aria-hidden=\"true\"></span>")

            }
        }
    },
    fail: function(e, data){
        console.log("failed");

        console.log(data.jqXHR.responseText);
        console.log(data.jqXHR+"\m");
    },
    always: function (e, data){
        console.log("in always");
    }
 });

}

这里发生的事情是仅在第一次尝试时 $('#uploadSupportingDoc')。on(“change”,function(){})被调用,之后< strong>每个后续更改事件都直接调用 $('#upinSupportingDoc')。fileupload()函数。为什么会这样?

0 个答案:

没有答案