caricamento file jQuery: è possibile attivare il caricamento con un pulsante di invio?

Question

Sto utilizzando jQuery file upload per caricamenti basati su AJAX. Inizia sempre a caricare dopo che un file è stato selezionato. È possibile modificare il comportamento per utilizzare il pulsante "invia"? Sono a conoscenza di Issue #35, ma l'opzione beforeSend sembra essere stata rimossa.

Sto usando il Basic Plugin, non la versione completa.

Forse dovrei semplicemente passare al caricamento basato su XHR come suggerito lì: jQuery Upload Progress and AJAX file upload.

Answer 1

se avete il pulsante

<button id="up_btn">Upload</button> 

Si può provare con

$('#fileupload').fileupload({ 
    dataType: 'json', 
    add: function (e, data) {    
     $("#up_btn").off('click').on('click', function() { 
      data.submit(); 
     }); 
    }, 
}); 

MODIFICA: in base ai commenti una risposta migliore per lo off per evitare richieste duplicate. (Lavorare anche unbind, io non controllare se è bind e unbind ma la squadra jquery consiglia on e offlink dal 1.7)

Answer 2

Nel campione scaricato Spostarsi js/jquery.fileupload-ui.js e che si dovrà autoUpload che è impostato per default true andare avanti e "false", allora è possibile utilizzare per presentare il comportamento.

EDIT:

Prova questo per l'implementazione di base:

<script> 
    /*global $ */ 
    $(function() { 


     $('.file_upload').fileUploadUI({ 
      url: 'FileUpload.ashx', 
      method: 'POST', 
      uploadTable: $('#files'), 
      downloadTable: $('#files'), 
      buildUploadRow: function (files, index) { 
       return $('<tr><td>' + files[index].name + '<\/td>' + 
        '<td class="file_upload_progress"><div><\/div><\/td>' + 
        '<\/td><\/tr>'); 
      }, 
      buildDownloadRow: function(file) { 
      return $('<tr id="file_'+file.name+'"><td>' + file.name + '<\/td>' 
       + '<td class="file_uploaded">' + 
       '<span class="ui-icon ui-icon-check"><\/span>' + 
       '<\/td><\/tr>'); 

      }, beforeSend: function(event, files, index, xhr, handler, callBack) { 
       if (files[index].size > 500000) { 
        handler.uploadRow.find('.file_upload_progress').html('<span class="ui-icon ui-icon-alert"><\/span>FILE TOO BIG!'); 
        setTimeout(function() { 
         handler.removeNode(handler.uploadRow); 
        }, 10000); 
        return; 
       } 
       callBack(); 
      } 
     }); 
    }); 
</script> 

Answer 3

si possono anche trovare in jquery.fileupload.js

C'è un ' autoUpload' opzione in linea 142.

uploadedBytes: undefined, 
// By default, failed (abort or error) file uploads are removed from the 
// global progress calculation. Set the following option to false to 
// prevent recalculating the global progress data: 
recalculateProgress: true, 
// Interval in milliseconds to calculate and trigger progress events: 
progressInterval: 100, 
// Interval in milliseconds to calculate progress bitrate: 
bitrateInterval: 500, 
// By default, uploads are started automatically when adding files: 
autoUpload: true // <<---------- here 

Answer 4

fare attenzione a non sovrapporre gli eventi per il fissaggio evento ogni volta che il file viene aggiunto. In questo modo il modulo verrà inviato più volte.

vorrei fare qualcosa di simile

$('#fileupload').fileupload({ 
    dataType: 'json', 
    add: function (e, data) {    
     $("#up_btn").off('click').on('click', function() { 
      data.submit(); 
     }); 
    }, 
}); 

Avviso il metodo off() per rimuovere tutti gli eventi collegati precedenti.

Answer 5

per utilizzando i modelli aggiuntivi da seguire che mostra upload e download deve farlo in questo modo

$('#fileupload').fileupload({ 
 
    dataType: 'json', 
 
    add: function (e, data) { 
 
     var that = this; 
 
\t  $.blueimp.fileupload.prototype.options.add.call(that, e, data); 
 
     $("#up_btn").on('click', function() { 
 
      data.submit(); 
 
     }); 
 
    }, 
 
});

Answer 6

Potete farlo agganciando nella aggiungere evento. Lì previ che l'uploader faccia il suo comportamento predefinito. Il file jquery-file-upload -docs lo spiega, ma è un po 'difficile da trovare.

Quanto segue è scritto nella blueimp basic uploader tutorial:

$(function() { 
    $('#fileupload').fileupload({ 
     dataType: 'json', 
     add: function (e, data) { 
      data.context = $('<button/>').text('Upload') 
       .appendTo(document.body) 
       .click(function() { 
        data.context = $('<p/>').text('Uploading...').replaceAll($(this)); 
        data.submit(); 
       }); 
     }, 
     done: function (e, data) { 
      data.context.text('Upload finished.'); 
     } 
    }); 
}); 

In realtà è molto importante, che il pulsante di invio che si sta creando non è all'interno del modulo!

Answer 7

Uso seguente:

<script type="text/javascript" charset="utf-8"> 
    $(function() { 
     $('#fileupload').fileupload({ 
      autoUpload: true 
     }); 
    }); 
</script> 

Lo ha fatto il trucco per me.

Answer 8

Nessuna di queste risposte funzionerà per più caricamenti di file. Il mio caso comportava l'autorizzazione di più allegati in un thread di commenti. Quindi ho dovuto prima salvare il commento per ottenere l'id, quindi caricare e salvare tutti gli allegati. Sembra una cosa banale, ma con questo plugin non è così intuitivo. La mia soluzione utilizza eventi personalizzati in jQuery e funziona alla grande.

La risposta attualmente accettata si associa all'evento click di un pulsante nel callback "add", ma il callback "add" viene chiamato una volta per ogni file. Se non si raggruppano tutti gli eventi, verrà caricato solo l'ultimo file.

$('#fileupload').fileupload({ 
    dataType: 'json', 
    add: function (e, data) { 
     $("#up_btn").on('customName', function (e) { 
      data.submit(); 
     }); 
    }, 
}); 

Legandosi il pulsante di invio per un nome personalizzato, possiamo fare quello che vogliamo pre-elaborazione prima di inviare le immagini. Nel mio caso ha comportato l'invio del commento e il ritorno del commento id che ho fatto in una chiamata separata. Questo codice risponde solo al clic, ma puoi fare tutto ciò che vuoi prima di attivare l'evento.

$("#up_btn").on('click', function (e) { 
    e.preventDefault(); 
    $("#up_btn").trigger("customName"); 
}); 

È possibile passare tutti i dati che si desidera quando si attiva l'evento, in modo che davvero ti dà il controllo completo sopra il vostro modulo.

Answer 9

Ecco come ho implementato caricamento di file utilizzando un tasto:

Ecco il tasto:

<button id="cmdSave" type="button" class="btn btn-primary" onclick="SaveInfo();">Save</button> 

Ecco l'elemento di input:

<input id="fileupload" type="file" name="files[]" style="display: none;"> 

Ecco la SaveInfo ():

//use this function to save Info with Attached file 
    function SaveInfo() { 
     // setup our wp ajax URL 
     var action_url = document.location.protocol + '//' + document.location.host + '/SaveInfo'; 

     $('body').addClass('waiting'); 
     //get the file(s) 
     var filesList = $('input[type="file"]').prop('files'); 

     //Initialize the file uploader 
     $('#Editor').fileupload();   //Editor is the Id of the form 

     //Along with file, this call internally sends all of the form data!!! 
     $('#Editor').fileupload('add', { 
      files: filesList, 
      url: action_url 
     }) 

     $('#Editor').bind('fileuploaddone', function (e, data) { 
      e.preventDefault(); //stop default behaviour! 
      if (data.result.status == 1) { //saved! 
       //do something useful here... 
      } 
      $('body').removeClass('waiting'); 
     }); 

     // Callback for failed (abort or error) uploads: 
     $('#Editor').bind('fileuploadfail', function (e, data) { 
      e.preventDefault(); //stop default behaviour! 
      $('body').removeClass('waiting'); 
     }); 
    } 

Nota: Potrebbe non essere molto elegante, ma funziona per me. Questo invierà anche tutti i campi del modulo al server. Questo invierà SOLO i campi all'interno del modulo se il file viene anche caricato. Se il file non è presente, NON invierà i dati del modulo al server! Anche se non l'ho provato con più file, questo metodo potrebbe essere espanso per fare anche multipli. Quando lo provo, aggiornerò questo post con le informazioni.