Twitter Bootstrap FileUpload

Question

Me gustaría utilizar el archivo bootstrap-fileupload.js (http://jasny.github.com/bootstrap/javascript.html#fileupload) pero estoy confundido en el desencadenador de eventos.

¿Cómo puedo activar un evento enviando la imagen a un script web (php, por ejemplo) una vez que se selecciona un activo multimedia?

Answer 1

Te recomiendo que uses https://github.com/blueimp/jQuery-File-Upload para subir archivos.

Answer 2

Me encontré con un problema similar en el que quería subir una imagen a través de solicitud AJAX tan pronto como el usuario navegaba/seleccionaba la imagen y actualizaba un campo oculto con ID de imagen guardada. No pude encontrar la solución con bootstrap-fileupload.js. Así que por debajo del enfoque funcionó para mí. Forma

<script type="text/javascript" src="http://malsup.github.com/jquery.form.js"></script> 
<script type="text/javascript"> 
var options = { 
     success:  showResponse // post-submit callback 
    }; 
    $(document).ready(function() 
    { 
     $('#photoimg').live('change', function() 
     { 
      $("#imageform").ajaxForm(options).submit();   
     }); 
    }); 

    function showResponse(responseText, statusText, xhr, $form) { 
     $('#photoUrl').val(responseText); 
    } 
</script> 

la imagen: (no debe ser una forma anidada!)

<form id="imageform" action="${pageContext.request.contextPath}/app/upload/saveimage" method="post" enctype="multipart/form-data"> 
       <div style="top: 25px"> 
       <div class="span6" style="margin-top: -545px; margin-left:680px"> 
       <div class="control-group"> 
       <label class="control-label " style="text-align: left">Photo: </label> 
       <div data-fileupload="image" class="fileupload fileupload-new"> 
        <div style="margin-left:-235px ;width: 150px; height: 150px; line-height: 150px;" class="fileupload-preview thumbnail" ></div> 
        <div> 
         <span class="btn btn-file" style="margin-right: 135px"><span class="fileupload-new" >Select image</span><span class="fileupload-exists">Change</span><input type="file" name="fileData" id="photoimg"/></span> <a data-dismiss="fileupload" class="btn fileupload-exists" href="#" style="margin-left: -75px">Remove</a> 
        </div> 
       </div> 
       </div> 

       </div> 
       </div> 
      </form> 

<input type="hidden" name="individualCustomer.personInfo.photoUrl" id="photoUrl" /> 

Answer 3

se puede integrar con jQuery Carga de archivos (https://github.com/blueimp/jQuery-File-Upload) quitando el archivo bootstrap.fileupload.js ya que tiene una nombrar el conflicto con jQuery File Uploader y no funcionará correctamente con él. Esto significa que no podrá usar las funciones más avanzadas del componene de Jasny. Pero sugiero que lea el código e implemente su propia solución (no es tan difícil :)).

Lo otro que puede hacer es usar un componente diferente para bootstrap. Este componente funciona bien de fábrica, no es necesario modificar su marcado: http://gregpike.net/demos/bootstrap-file-input/demo.html. Es más simple que el componente jasny y, por lo tanto, podría ser más adecuado en algunos casos.