Cómo utilizar html5 para implementar la carga de archivos mediante arrastrar y soltar

Primero determine si el archivo arrastrado cumple con los requisitos, incluido el tipo y tamaño de la imagen, etc., luego obtenga información de la imagen local para obtener una vista previa y finalmente cárguela.

$(function(){

...Continúa desde la parte anterior

var box = document.getElementById('drop_area'); // Arrastrar y área de colocación

box.addEventListener("drop", function(e){

e. preventDefault(); // Elimina el efecto de arrastrar y soltar predeterminado del navegador

var fileList = e.dataTransfer.files; //obtener el objeto del archivo

//detectar si es arrastrar y soltar un archivo en la página

if(fileList .length == 0 ) {

return false

}

// Prueba si el archivo es una imagen

if(fileList[ 0].type.indexOf('image') === -1){

alert("¡No arrastraste una imagen!")

; return false

}

// Arrastra la imagen al navegador para habilitar la función de vista previa

var img = window.webkitURL.createObjectURL(fileList[0] ]);

var filename = fileList[0].name; //Nombre de la imagen

var size = Math.floor((fileList[0].size)/1024);

if(filesizegt; 500){

alert("El tamaño cargado no puede exceder los 500K.");

return false

}

var str.

var str = "lt;img src='" img "'gt;lt;pgt; nombre de la imagen: " filename "lt;/pgt;lt ;pgt; tamaño:" tamaño de archivo "KBlt;/pgt;";

$("#preview").html(str);

//cargar

xhr = new XMLHttpRequest ();

xhr.open("post", "upload.php", true

xhr.setRequestHeader("X-Requested-With); ", "XMLHttpRequest") ;

var fd = new FormData();

fd.append('mypic', fileList[0]);

xhr.send(fd)

}, falso

});