JavaScript/HTML5/jQuery Carga arrastrar y soltar - "UnEught TypeError: no se puede leer la propiedad 'archivos' de undefined"

Question

Le aconsejaré antes que tenga experiencia limitada de JavaScript.

---

Actualmente, tengo el código JavaScript:

$('#xhr-filebox').bind({ 
    "dragover": HandleDragEvent, 
    "dragleave": HandleDragEvent, 
    "drop": HandleDropEvent 
}); 

function HandleDropEvent(e){ 
    var files = e.target.files || e.dataTransfer.files; 
    UploadFile(files[0]); 
} 

(se omite algo de código, pero me va a añadir más si lo solicita)

... y el código HTML:

<div class="filebox" id="xhr-filebox"> 
    <p id="xhr-action">...or click me to pick one.</p> 
</div> 

Sin embargo, cuando arrastro un archivo en él, la consola de Chrome JS dice esto:

Uncaught TypeError: Cannot read property 'files' of undefined

Sin embargo, puede obtener el objeto FileList al leer desde una entrada de archivo.

Curiosamente, cuando inicio sesión el argumento del evento (console.log (e)), registra como f.event, mientras que en una secuencia de comandos similar de mina, registra como MouseEvent (captura de pantalla: http://i.stack.imgur.com/3krcT.png)

A diferencia de la función bind() en jQuery, esta usa la función addEventListener() de un objeto DOM devuelto por getElementById(), IE esto es JavaScript puro. He intentado con ese método, pero no ocurre nada nuevo.

Answer 1

Si files no existe en e.target, que está buscando un files en e.dataTransfer   — pero si no hay dataTransfer propiedad en e (y no parece estar en la captura de pantalla) se le intenta desreferencia undefined, lo que provoca este error.

que cambiaría el código para:

function HandleDropEvent(e){ 
    var files = e.target.files || (e.dataTransfer && e.dataTransfer.files); 
    if (files) { 
     UploadFile(files[0]); 
    } 
    else { 
     // Perhaps some kind of message here 
    } 
} 

esta manera, si e.target.files no existe y e.dataTransfertambién no existe, obtendrá files siendo undefined, en lugar de un error .

---

El objeto de evento que jQuery le da es creado y normalizado por jQuery. Como sabemos que e.dataTransfer no existe en ese objeto de evento (de su captura de pantalla), supongo que no es una de las propiedades que jQuery copia del objeto de evento original. Está bien, sin embargo, porque jQuery nos da acceso al evento original a través del e.originalEvent. Así que iba a tratar:

function HandleDropEvent(e){ 
    var dt = e.dataTransfer || (e.originalEvent && e.originalEvent.dataTransfer); 
    var files = e.target.files || (dt && dt.files); 
    if (files) { 
     UploadFile(files[0]); 
    } 
    else { 
     // Perhaps some kind of message here 
    } 
} 

que atrapa files de e.target si eso es donde está, o desde el objeto dataTransfer dondequiera que lo encontremos (en e, o en e.originalEvent).

Answer 2

que había estado utilizando el siguiente código para los últimos años:

var files = e.target.files || 
(e.dataTransfer ? e.dataTransfer.files : e.originalEvent.dataTransfer.files); 

Sin embargo, recientemente he topado con un problema usando Chrome, donde e.target.files estaba allí, pero con una longitud de 0 lo que causó que los archivos estuvieran vacíos aunque dataTransfer sí tenía los archivos eliminados.

lo tanto, he tenido que usar un cheque ligeramente diferente:

var files = e.target.files; 
if (!files || files.length === 0) 
    files = (e.dataTransfer ? e.dataTransfer.files : .originalEvent.dataTransfer.files); 

Hopefuly esto puede ayudar a alguien más.