Carga de archivo de jQuery: ¿Es posible activar la carga con un botón de envío?

Question

Estoy usando jQuery file upload para cargas basadas en AJAX. Siempre comienza a cargarse después de seleccionar un archivo. ¿Es posible cambiar el comportamiento para usar el botón "enviar"? Soy consciente de Issue #35, pero la Opción beforeSend parece haber sido eliminada.

Estoy usando el Basic Plugin, no la versión completa.

Tal vez debería cambiar simplemente a la carga basada en XHR como se sugiere allí: jQuery Upload Progress and AJAX file upload.

Answer 1

si tiene el botón

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

Usted puede tratar con

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

EDITAR: según los comentarios una mejor respuesta considere off para evitar solicitudes duplicadas. (También trabajar unbind, no comprobar si se ha bind y unbind pero el equipo jQuery recomiendan on y offlink desde 1.7)

Answer 2

En la muestra descargado Vaya a js/jquery.fileupload-ui.js y en el que va a tener autoUpload que ha sido ajustado de forma predeterminada true seguir adelante y que "false" entonces se puede usar presentar comportamiento.

EDIT:

Prueba esto para la implementación básica:

<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

También se puede encontrar en jquery.fileupload.js

Hay un ' AutoUpload opción' en la línea 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

Asegúrese de no apilar eventos adjuntando evento cada vez que se agrega el archivo. De esa forma, el formulario será enviado varias veces.

me gustaría hacer algo como esto Aviso

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

el método de apagado() para eliminar todos los eventos anteriores adjuntos.

Answer 5

para el uso de las plantillas de complementos para seguir mostrando carga y descarga debe hacerlo de esta manera

$('#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

Usted puede hacer que al enganchar en la añadir evento. Allí evita que el cargador haga su comportamiento predeterminado. El jquery-file-upload -docs explica eso, pero es un poco difícil de encontrar.

Lo siguiente está escrito en el 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.'); 
     } 
    }); 
}); 

En realidad, es muy importante, que el botón de envío que está creando no está dentro de la forma!

Answer 7

Uso siguiente:

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

Se hizo el truco para mí.

Answer 8

Ninguna de estas respuestas funcionará para varias cargas de archivos. Mi caso implicaba permitir múltiples archivos adjuntos en un hilo de comentarios. Así que tuve que guardar el comentario primero para obtener la identificación, y luego cargar y guardar todos los archivos adjuntos. Esto parece algo trivial, pero con este complemento no es tan intuitivo. Mi solución usa eventos personalizados en jQuery, y funciona muy bien.

La respuesta actualmente aceptada se vincula al evento de clic de un botón en la devolución de llamada 'Agregar', pero la devolución de llamada 'agregar' se llama una vez para cada archivo. Si desenlaza todos los eventos cada vez, solo se cargará el último archivo.

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

Al unirse el botón de enviar a un nombre personalizado, podemos hacer lo que queremos procesamiento previo antes de enviar las imágenes. En mi caso, implicaba enviar el comentario y recuperar el ID del comentario, lo que hice en una llamada por separado. Este código solo responde al clic, pero puede hacer lo que quiera antes de activar el evento.

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

Puede pasar cualquier dato que desee cuando se dispara el evento, por lo que realmente le da un control completo sobre su forma.

Answer 9

Aquí es cómo he implementado carga de archivos mediante el uso de un botón:

Aquí está el botón:

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

Aquí es el elemento de entrada:

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

Aquí es el SaveInfo () función:

//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: Puede que no sea muy elegante, pero funciona para mí. Esto también enviará todos los campos del formulario al servidor. Esto SÓLO enviará los campos dentro del formulario si el archivo también se está cargando. Si el archivo no está presente, ¡NO enviará datos del formulario al servidor! Aunque no lo probé con varios archivos, este método también puede ampliarse para hacer múltiplos. Cuando lo intento, actualizaré esta publicación con la información.