Загрузка файла Blueimp Загрузка плагина только один раз

Question

У меня есть эта странная проблема, и я попробовал несколько решений (даже реализуя то же, что и демо-версия Basic Plus на своем веб-сайте). Я могу загружать файлы просто отлично, одно или несколько. Они загружаются одним щелчком отдельного элемента или кнопкой «Загрузить все». Проблема заключается в попытке добавить дополнительные файлы до или после загрузки. Плагин загрузки файлов даже не обнаруживает, что эти файлы меняются во входном файле, поэтому он никогда не запускает событие «fileuploadadd» и требует, чтобы я обновил страницу, чтобы загрузить больше файлов. Мне интересно, где-то где-то теряется событие изменения файла загрузки, но я не могу на всю жизнь выяснить, где.

Кроме того, требуется ли плагин для загрузки файла blueimp определенного формата JSON? В ближайшее время я просто возвращаю "{\"status\":\"success\"}, если загрузка выполнена успешно, и подобное сообщение об ошибке. EDIT: Изменение формата ответа на примеры, показанные 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; 
});