Blueimp文件上傳插件僅上傳一次

Question

我有這個奇怪的問題，我已經嘗試了幾種解決方案（甚至在他們的網站上實施基本Plus演示）。我可以很好地上傳文件，單個或多個文件。他們通過點擊單個項目或「全部上傳」按鈕進行上傳。問題是在上傳之前或之後嘗試添加其他文件。文件上傳插件甚至不會檢測到這些文件在文件輸入中發生變化，因此它永遠不會觸發「fileuploadadd」事件，並且需要我刷新頁面才能上傳更多文件。我想知道是否fileupload更改事件正在丟失某處，但我不能爲我的生活弄清楚在哪裏。

另外，blueimp文件上傳插件是否需要特定的JSON返回格式？當前，如果上傳成功，我只是返回"{\"status\":\"success\"}，並且出現類似的錯誤消息。 編輯：將響應格式更改爲blueimp顯示的示例沒有效果。

下面是我正在使用的上傳器的一些代碼。請注意，我目前使用ASP.NET和jQuery 2.0.3，以及jQuery UI 1.9.2。

function initFileUploader() { 
    //initProgressBars(); 
    $(upload_progressbar_title).css('display', 'none'); 
    $(upload_progressbar).css('display', 'none'); 
    $(upload_upload).on('click', function() { 
     $(upload_progressbar).css('display', 'block'); 
     $(upload_progressbar_title).css('display', 'block'); 
     $('.uploadbtn').click(); 
    }); 
    $(upload_browse).on('click', function() { 
     $(upload_file).click(); 
     return false; 
    }); 

    $.guid = 0; 
    console.log('initialising file upload'); 

    var uploadButton = $('<input type="button" id="button" />') 
     .addClass('button tiny').addClass('uploadbtn') 
     .prop('disabled', true) 
     .val('Processing...'); 

    var uploadCon = $('<div class="small-4 medium-6 large-6 columns progresscontainer" />') 
      .append('<div class="progressbar" />') 
      .append('<label class="progressbarlabel">Not uploading</label>'); 

    uploadCon.append($(uploadButton).on('click', function() { 
     var $this = $(this), 
      data = $this.parent().data(); 
     $this 
      .off('click') 
      .val('Abort') 
      .on('click', function() { 
       $this.remove(); 
       data.abort(); 
      }); 
     data.submit().always(function() { 
      $this.remove(); 
     }).success(function (result, textStatus, jqXHR) { console.log("Result: " + result + " - TextStatus " + textStatus); }) 
     .error(function (jqXHR, textStatus, errorThrown) { console.log("Error: " + errorThrown + " - TextStatus " + textStatus); }) 
     .complete(function (result, textStatus, jqXHR) { console.log("Result: " + result + " - TextStatus " + textStatus); }); 
    })); 

    $(upload_file).fileupload({ 
     dataType: 'json', 
     autoUpload: false, 
     acceptFileTypes: /(\.|\/)(pdf|jpe?g|png|doc|docx)$/i, 
     maxFileSize: 5000000, // 5 MB 
    }).on('fileuploadadd', function (e, data) { 
     var uniqueId = $.guid++; 
     data.context = $('<div id="div_upload_dcon_' + uniqueId +'" class="row"/>').appendTo(upload_filescon); 
     $.each(data.files, function (index, file) { 
      file.uniqueId = uniqueId; 
      var node = $('<div id="div_fname" class="small-6 medium-4 large-4 columns"/>') 
        .append($('<span/>').text(file.name)); 
      if (!index) { 
       data.url = baseUrl + 'PostUploadFile?fileName=' + data.files[index].name + '&refId=' + ClientRefId + '&upbyid=' + ClientUserId + '&ticketId=' + globalTicketId; 
       var contentNode = (uploadCon.clone(true).data(data)); 
      } 
      node.appendTo(data.context); 
      $(contentNode).appendTo(data.context); 
      $(upload_file).on('change', function() { 
       alert('changing fileinput'); 
      }); 
     }); 
    }).on('fileuploadstart', function (e, data) { 
     initProgressBars(); 
    }).on('fileuploadchange', function (e, data) { 
     alert('changing'); 
    }).on('fileuploadprocessalways', function (e, data) { 
     var index = data.index, 
      file = data.files[index], 
      node = $(data.context.children()[index]); 
     if (file.error) { 
      console.log(file.error)); 
     } 
     if (index + 1 === data.files.length) { 
      $('.uploadbtn').val('Upload').prop('disabled', !!data.files.error); 
     } 
    }).on('fileuploadprogress', function (e, data) { 
     var progress = parseInt(data.loaded/data.total * 100, 10); 
     $('#div_upload_dcon_' + data.files[0].uniqueId).progressbar('value', progress); 
    }).on('fileuploadprogressall', function (e, data) { 
     var progress = parseInt(data.loaded/data.total * 100, 10); 
     $(upload_progressbar).progressbar('value', progress); 
    }).on('fileuploaddone', function (e, data) { 
     getTicketContent(globalTicketId); 
    }).on('fileuploadstop', function (e, data) { 
     $(upload_file).val(''); 
    }).on('fileuploadfail', function (e, data) { 
     $.each(data.files, function (index, file) { 
      var error = $('<span class="text-danger"/>').text('File upload failed.'); 
      $(data.context.children()[index]) 
       .append('<br>') 
       .append(error); 
     }); 
    }); 
} 

Answer 1

好，一個晚上的睡眠，多思考之後，我指定的文件上傳初始化期間選擇此選項

replaceFileInput: false, 

。猜猜看，它現在按預期工作。我猜測文件輸入丟失了，因爲fileupload在上傳或更改後默認克隆了控件。

感謝任何人可能已經給出的任何考慮，我希望它在將來可以派上用場。

Answer 2

，因爲原來的答案它已經兩年了，但我想通了這一點我自己的情況下（：

如果使用replaceFileInput：假的，代碼將無法在IE9工作，它不支持新文件上傳的API根據文檔，這個瀏覽器的後備支持取決於「iframe傳輸」，它要求每次都要更換文件輸入元素，閱讀這些對我來說是很大的線索

什麼是真正殺死你的是此：

$(upload_browse).on('click', function() { 
    $(upload_file).click(); 
    return false; 
}); 

您假設upload_file仍然是相同的元素，但它已被替換爲一個克隆。您正在點擊舊文件輸入元素上的點擊事件。它存在，所以你得到系統瀏覽對話框，但它沒有連接到任何管道。

因此，完全支持IE9的正確解決方案是每次點擊處理程序時都使用「find」重新定位upload_file。你沒有包括你設置upload_file的代碼，所以我不知道你的情況下選擇器是什麼，但它看起來像這樣：

$(upload_browse).on('click', function() { 
    // You should use a more specific selector, better yet use 
    // find() to locate it inside some div you know is "in scope" so 
    // you don't fire every file input on the page. Just an example 
    $('input[type=file]').click(); 
    return false; 
});