Upload di upload di file Blueimp caricati solo una volta

Question

Ho questo strano problema e ho provato diverse soluzioni (anche implementando le stesse demo di Basic Plus sul loro sito web). Posso caricare file bene, singoli o multipli. Caricano con un clic del singolo elemento o con il pulsante "Carica tutto". Il problema sta provando ad aggiungere file aggiuntivi prima o dopo il caricamento. Il plug-in per il caricamento dei file non rileva nemmeno che questi file stanno cambiando nell'input del file, quindi non spara mai l'evento "fileuploadadd" e mi richiede di aggiornare la pagina per caricare più file. Mi chiedo se l'evento di modifica del fileupload si stia perdendo da qualche parte, ma non posso per la vita di me capire dove.

Inoltre, il plugin di caricamento del file blueimp richiede uno specifico formato di ritorno di JSON? Al momento, sto solo restituendo "{\"status\":\"success\"} se i caricamenti sono un successo e un messaggio di errore simile. MODIFICA: La modifica del formato di risposta su esempi mostrati da blueimp non ha avuto alcun effetto.

Ecco un codice per l'uploader che sto utilizzando. Nota che attualmente sto usando ASP.NET e jQuery 2.0.3 e 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

Bene, dopo una notte di sonno e più pensarci, ho specificato questa opzione

replaceFileInput: false, 

durante il caricamento di file di inizializzazione. E indovina un po ', funziona come previsto ora. Sto indovinando che l'input del file è stato perso perché il fileupload clona il controllo per impostazione predefinita dopo un caricamento o una modifica.

Grazie per qualsiasi considerazione che qualcuno possa aver dato questo, spero che sia utile per qualcun altro in futuro.

Answer 2

Sono passati due anni da quando la risposta originale, ma ho appena capito questo per il mio caso proprio (:

Se si utilizza replaceFileInput: false, il codice non funziona in IE9, che non supporta il più recente API di upload di file. in base alla documentazione di supporto fallback per questo browser dipende da un "trasporto iframe", che richiede l'elemento di input file di essere sostituito ogni volta. lettura che è stato il grande indizio per me.

ciò che è veramente uccidendo voi è questo:

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

Si presume che upload_file sia ancora lo stesso elemento, ma è stato sostituito con un clone. Stai attivando un evento click sul vecchio elemento di input del file. Esiste, quindi ottieni la finestra di dialogo di ricerca del sistema, ma non è collegata a nessun impianto idraulico.

Quindi la soluzione corretta con supporto IE9 completo consiste nell'utilizzare "trova" per individuare nuovamente upload_file ogni volta che viene attivato questo gestore di clic. Non hai incluso il tuo codice per impostare upload_file, quindi non so quale sarebbe il selettore corretto nel tuo caso, ma sarebbe simile a questo:

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