JQuery - Arrastrar y soltar archivos - ¿Cómo obtener información del archivo?

Question

Interesado en construir mi propio cargador de archivos de arrastrar y soltar usando JQuery/AJAX/PHP.

Básicamente quiero una carga de archivos que los usuarios de mi sitio pueden simplemente arrastrar el archivo desde su computadora a un div que he creado, y luego cargarán el archivo para ellos al destino seleccionado.

me gustaría construir esto desde el principio, y no utilizar ningún tipo de plugins para que pueda manipular mejor las restricciones (tipos de archivo, tamaño, carpetas de destino, etc.)

rastreado Google sin suerte, sólo se complementos ¿Puede de todos modos dirigirme en la dirección correcta?

ACTUALIZACIÓN Bien, entonces descubrí cómo hacer lo que quiero. Simplemente configure la opacidad del campo de entrada del archivo en 1 para que quede oculto, y aún puede arrastrar un archivo a esa área general y si toca el campo de texto lo captará. SIN EMBARGO, me gustaría saber cómo aumentar el alto/ancho en el campo de entrada del archivo (intenté css básico en el archivo, pero solo aumenta el tamaño del botón 'examinar' y no el campo real donde puede colocar el archivo. ¿alguna idea de cómo hacer esto? básicamente quiero un gran div cuadrado que dice 'archivo soltar aquí'. Así que tengo que cambiar el tamaño del campo de entrada.

Answer 1

Se puede utilizar el HTML 5 dragenter y dragleave eventos para crear una zona de saltos.
Entonces colocando una entrada de archivo dentro de la zona de saltos, y ocultarlo con CSS, se puede cargar el archivo cuando el evento change para los fuegos de entrada, como este

var dropzone = $("#dropzone"), 
    input = dropzone.find('input'); 

dropzone.on({ 
    dragenter : dragin, 
    dragleave : dragout 
}); 

input.on('change', drop); 

function dragin(e) { //function for drag into element, just turns the bix X white 
    $(dropzone).addClass('hover'); 
} 

function dragout(e) { //function for dragging out of element       
    $(dropzone).removeClass('hover'); 
} 

function drop(e) { 
    var file = this.files[0]; 
    $('#dropzone').removeClass('hover').addClass('dropped').find('img').remove(); 

    // upload file here 
} 

FIDDLE

Answer 2

Para los interesados, me encontré con este tutorial/demostración para ser de utilidad: http://www.viget.com/inspire/custom-file-inputs-with-a-bit-of-jquery/

utiliza Básicamente un <span> para cubrir el campo de entrada por defecto.

Answer 3

Solo para sonar aquí, ya que he estado haciendo esto también en los últimos días. Por lo que entiendo si está vinculando el evento drop a través de jQuery, necesita acceder a ese objeto event.dataTransfer yendo a través del objeto event.originalEvent en el evento provisto por jQuery.

Ejemplo:

En este Ato tanto a la dragover así como drop eventos, ya que esto era necesario para evitar que la realización de la acción por defecto (que se encuentra que la solución aquí: Prevent the default action. Working only in chrome)

$('#dropzone').bind('dragover drop', function(event) { 
    event.stopPropagation(); 
    event.preventDefault(); 
    if (event.type == 'drop') { 
     console.log(event.originalEvent.dataTransfer.files); 
    } 
}); 

también parece que hay un error en el que si el console.log()event.dataTransfer (o event.originalEvent.dataTransfer) es archivos matriz está vacía, se señaló aquí: event.dataTransfer.files is empty when ondrop is fired?

Para responder mejor a la pregunta PO (Acabo de notar que el resto de ella, y sé que es antiguo, pero algunos uno puede encontrar útil esta información):

Mi aplicación está en jQuery, así que espero que eso está bien:

var files = []; 

// Attaches to the dropzone to pickup the files dropped on it. In mine this is a div. 
$("#dropzone").bind('dragover drop', function(event) { 
    // Stop default actions - if you don't it will open the files in the browser 
    event.stopPropagation(); 
    event.preventDefault(); 

    if (e.type == 'drop') { 
     files.push(event.originalEvent.dataTransfer.files); 
    } 
}); 

// Attach this to a an input type file so it can grab files selected by the input 
$("#file-input").bind('change', function(event) { 
    files.push(event.target.files); 
}); 

// This is a link or button which when clicked will do the ajax request 
// and upload the files 
$("#upload-button").bind('click', function(event) { 
    // Stop the default actions 
    event.stopPropagation(); 
    event.preventDefault(); 

    if (files.length == 0) { 
     // Handle what you want to happen if no files were in the "queue" on clicking upload 
     return; 
    } 

    var formData = new FormData(); 
    $.each(files, function(key, value) { 
     formData.append(key, value); 
    }); 

    $.ajax({ 
     url: 'upload-ajax', 
     type: 'POST', 
     data: formData, 
     cache: false, 
     dataType: 'json', 
     processData: false, // Don't process the files - I actually got this and the next from an SO post but I don't remember where 
     contentType: false, // Set content type to false as jQuery will tell the server its a query string request 
     success: function(data, textStatus, jqXHR) { /* Handle success */ }, 
     error: function(jqXHR, textStatus, errorThrown) { /* Handle error */ } 
    }); 

}); 

También podría enlazar a los otros eventos en la respuesta aceptada para hacer efectos como desvanecer la zona de caída para que pueda verla (eso está en mi lista de tareas para mi biblioteca). Este es el núcleo de la carga real de archivos ajax que uso, sin embargo.

Realmente no tengo una manera conveniente de probar eso, pero eso es en esencia cómo lo hice (esencialmente tomé todo ese código de la biblioteca que he estado haciendo y lo adapté para adaptarlo a un bloque de código general en aquí de una manera fácil de entender). Espero que esto ayude a algunas personas. A partir de aquí, en realidad fue muy fácil seguir adelante y agregar una lista de cola de archivos, con la capacidad de eliminar archivos de la cola, por lo que este debería ser un buen punto de partida.