avvia il caricamento del file alla selezione

Question

Normalmente, per caricare un file, si tratterebbe di una procedura in due passaggi: selezionare un file e quindi confermare il caricamento. Sto lavorando per caricare l'immagine del profilo. Poiché l'immagine del profilo è di solito piccola, voglio ridurre i clic del mouse per i miei utenti facendo in modo che il caricamento del file inizi sulla selezione del file. Si prega di suggerire buoni, e forse comuni, modi per ottenere ciò (vorrei anche imparare le loro insidie, se ce ne sono). Grazie.

Answer 1

L'evento change si attiva quando un file viene selezionato da un campo di caricamento file. Il valore del campo sarà '' se nessun file è selezionato (il campo è deselezionato).

<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> 

È una buona idea? Discutibile. Inviare automaticamente un modulo se l'utente non si aspetta che possa avere un impatto negativo.

Answer 2

Si potrebbe utilizzare jQuery per inviare automaticamente il file sul sever sulla selezione ...

Problemi:

cosa succede se l'utente doesnt vogliono scegliere il file, ma il file è già caricato sul server?

Cosa succede se il precedente si verifica prima del completamento del caricamento del file?

E quando l'utente non fa nulla e chiude la pagina? Per quanto tempo manterrai il file

Answer 3

Se utilizzi GMail, noterai che dispongono di una soluzione a trascinamento per il collegamento di file a un'e-mail. Trascina dal desktop su una regione predefinita e wallah.

Se si dispone del supporto HTML5 per le persone che lo utilizzano (la maggior parte dovrebbe essere aggiornata), è possibile utilizzare il drag-drop integrato in HTML5.

prova a guardare questo: http://www.thebuzzmedia.com/html5-drag-and-drop-and-file-api-tutorial/

Si potrebbe anche dare qualcosa di simile a una prova Plupload (http://www.plupload.com/), ma che potrebbe essere eccessivo per questo. Plupload è più adatto per i file più grandi che richiedono animazioni e blocchi di progresso. Tuttavia, so che potresti eseguire lo script in modo tale che l'upload inizi immediatamente e tu reindirizzi non appena viene completato. Potrebbe anche essere necessario un lavoro sul lato server per il quale non si è stati configurati.