Przesyłanie plików Blueimp Plugin ładuje się tylko raz

Question

Mam ten dziwny problem i wypróbowałem kilka rozwiązań (nawet wdrażając to samo, co demo Basic Plus na ich stronie internetowej). Mogę przesyłać pliki w porządku, pojedyncze lub wielokrotne. Przesyłają po kliknięciu pojedynczego elementu lub przycisku "Prześlij wszystko". Problem polega na próbie dodania dodatkowych plików przed lub po przesłaniu. Wtyczka do przesyłania plików nie wykryje nawet, że te pliki zmieniają się w pliku wejściowym, więc nigdy nie uruchamia zdarzenia "fileuploadadd" i wymaga ode mnie odświeżenia strony, aby przesłać więcej plików. Zastanawiam się, czy zdarzenie zmiany pliku jest gdzieś utracone, ale nie mogę dla mnie dowiedzieć się gdzie.

Co więcej, czy wtyczka do przesyłania plików blueimp wymaga określonego formatu zwrotu JSON? Z minuty na minutę wracam "{\"status\":\"success\"}, jeśli przesyłanie się powiedzie i podobny komunikat o błędzie. EDYCJA: Zmiana formatu odpowiedzi na przykłady pokazane przez blueimp nie przyniosła żadnego efektu.

Oto kod dla przesyłającego, którego używam. Zauważ, że używam obecnie ASP.NET i jQuery 2.0.3 oraz 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

Dobrze, po przespanej nocy i więcej myśleć o tym, że podano tę opcję

replaceFileInput: false, 

podczas inicjalizacji wysyłania plików. I zgadnij, co teraz działa. Zgaduję, że dane wejściowe pliku zostały utracone, ponieważ fileupload klonów kontroli domyślnie po przesłaniu lub zmianie.

Dziękuję za wszelkie uwagi, które ktoś mógł udzielić, mam nadzieję, że przyda się komuś w przyszłości.

Answer 2

Minęły dwa lata od czasu pierwotnego odpowiedź, ale ja po prostu zdobione to dla własnej sprawie (:

Jeśli używasz replaceFileInput: false, kod nie będzie działać w IE9, która nie obsługuje nowsze Zgodnie z dokumentacją awaryjne wsparcie dla tej przeglądarki zależy od "transportu iframe", który wymaga każdorazowego zastąpienia elementu wprowadzania danych, co było dla mnie wielką wskazówką:

Co tak naprawdę zabija cię to:

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

Zakładasz, że upload_file jest wciąż tym samym elementem, ale został zastąpiony klonem. Wystrzeliwujesz zdarzenie click na starym elemencie wprowadzania pliku. Istnieje, więc dostajesz okno dialogowe przeglądania systemu, ale nie jest ono podłączone do żadnej instalacji hydraulicznej.

Prawidłowym rozwiązaniem z pełną obsługą IE9 jest użycie "find", aby od nowa znaleźć upload_file przy każdym uruchomieniu obsługi kliknięcia. Nie uwzględniłeś kodu do ustawienia upload_file, więc nie wiem, jaki selektor byłby w twoim przypadku, ale wyglądałby tak:

$(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; 
});