iniciar carga de archivo al seleccionar

Question

Normalmente, para cargar un archivo, sería un proceso de dos pasos: seleccione un archivo y luego confirme la carga. Estoy trabajando para subir una foto de perfil. Como la foto de perfil suele ser pequeña, quiero reducir el número de clics del mouse para mis usuarios al hacer que el archivo se cargue para comenzar con la selección del archivo. Sugiera maneras buenas, y quizás comunes, de lograr esto (también me gustaría aprender sus peligros, si es que hay alguno). Gracias.

Answer 1

El evento change se activará cuando se seleccione un archivo desde un campo de carga de archivos. El valor del campo será '' si no se selecciona ningún archivo (el campo se borra).

<form method="post" action="upload.script"> 
    <input type="file" id="formfile"/> 
    <input type="submit" id="formsubmit"/> 
</form> 

<script type="text/javascript"> 
    var file= document.getElementById('formfile'); 
    var submit= document.getElementById('formsubmit'); 

    // If scripting is available, can auto-submit the form, so no submit 
    // button needed. 
    // 
    submit.parentNode.removeChild(submit); 

    // When field is filled in with a filename, submit form 
    // 
    file.onchange= function() { 
     if (this.value!=='') 
      this.form.submit(); 
    }; 
</script> 

¿Es esta una buena idea? Cuestionable. Enviar automáticamente un formulario si el usuario no lo espera puede tener un impacto negativo.

Answer 2

Se puede usar jQuery para publicar automáticamente el archivo al cortar después de la selección ...

Problemas:

¿Qué pasa si el imposible usuario quiere elegir ese archivo pero el archivo se ha subido a la ¿servidor?

¿Qué sucede si lo anterior ocurre antes de que el archivo haya terminado de cargarse?

¿Qué tal si el usuario no hace nada y cierra la página? ¿Cuánto tiempo mantendrá el archivo

Answer 3

Si usa GMail, notará que tiene una solución de arrastrar y soltar para adjuntar archivos a un correo electrónico. Arrastre desde su escritorio a una región predefinida y wallah.

Si tiene compatibilidad con HTML5 para las personas que usan esto (la mayoría debería hacerlo si están actualizadas), entonces podría usar la función de arrastrar y soltar incorporada en HTML5.

intente buscar en esto: http://www.thebuzzmedia.com/html5-drag-and-drop-and-file-api-tutorial/

También podría dar algo así como una oportunidad Plupload (http://www.plupload.com/), pero que podría ser excesiva para esto. Plupload es más adecuado para archivos más grandes que necesitan animaciones de progreso y fragmentación. Sin embargo, sé que sería capaz de crear una secuencia de comandos de tal manera que la carga se inicia de inmediato y se redirige tan pronto como se completa. También podría necesitar un trabajo del lado del servidor para el que no está configurado.