1. API de archivo: (API de archivo)
Cada archivo seleccionado por un control de formulario de tipo de archivo es un objeto de archivo, y el objeto Filelist es una lista de recopilación de estos objetos de archivo, que representa todos los archivos seleccionados. El objeto de archivo hereda de un objeto BLOB, que representa datos sin procesar binarios y proporciona un método de corte para acceder a los bloques de datos originales dentro de los bytes. En resumen, el objeto de archivo contiene el objeto flielista, ¡y el objeto de archivo hereda del objeto blob!
Relaciones de atributo relevantes de cada objeto:
Interfaz FileReader:
Como se puede ver en la figura, HTML5 también proporciona una interfaz FileReader: se usa para leer archivos en la memoria y leer datos en el archivo.
var lector = new FileReader ();
Hay cuatro métodos y seis eventos en total para esta interfaz:
• ReadAsBinaryString (archivo): lea el archivo como binario
• ReadAsdataurl (archivo): leer el archivo dataUrl
• ReadEteText (archivo, [codificación]): lea el archivo como texto
• Acerca de (ninguno): lectura de archivos de interrupción
---------------------------------------------------------------------------------------------------
• Onabort: activado al leer el archivo
• OnError: activado cuando ocurre un error cuando se lee un archivo
• OnloadStart: activado al leer el archivo inicia
• OnProgress: sigue activando al leer el archivo
• Onload: activado cuando el archivo se lee correctamente
• Onloadend: activado al final de la lectura del archivo (se activan tanto el éxito como el fracaso)
Los parámetros del evento anteriores tienen E.Target.Result o This.
2. Arrastre y suelte la API:
¡Arrastre y suelte el atributo: Establezca el atributo arrastrable del elemento que debe arrastrarse y soltar a True (dragable = "true")! El elemento IMG y un elemento se pueden arrastrar y soltar de forma predeterminada.
Eventos de arrastrar y soltar: (segmentado en eventos de elementos de arrastre y caída y eventos de elementos de destino)
Arrastre y suelte eventos de elementos:
• Dragstart: activado antes de arrastrar
• Arrastre, se dispara continuamente antes y después de arrastrar
• Dragar, el extremo de arrastre se desencadena
Evento del elemento objetivo:
• Dragenter, ingrese el elemento de destino para activar
• Dragover, entre ingresar al objetivo y dejar el objetivo, activando continuamente
• dragleeave, activando el elemento de destino
• Suelte, suelte el disparador del mouse en el elemento de destino
¡pero! Cabe señalar que en el elemento de destino, el comportamiento predeterminado debe bloquearse (se rechazan dragover y drop) en los eventos de dragover y soltar, ¡de lo contrario se puede implementar arrastrarse y soltar!
---------------------------------------------------------------------------------------------------
Objeto DataTransfer: se usa especialmente para almacenar datos que se llevarán a cabo durante la resistencia y la caída. Se puede configurar como la propiedad DataTransfer de los eventos de arrastrar y soltar.
3 atributos:
• EffectLoWed: establezca estilos de cursor (ninguno, copia, copylink, copymove, link, linkmove, mude, todos y no inicializado)
• Efective: Establezca los efectos visuales de las operaciones de arrastre y caída
• Tipos: el tipo de datos almacenados, una pseudo-matriz de cuerdas
• Archivos: Obtenga el archivo arrastrado externo, devuelva una lista de Filelist, hay un atributo de tipo en FileSlist, que devuelve el tipo de archivo
4 Métodos:
• setData (): establezca la clave de datos y el valor (debe ser una cadena)
• getData (): Obtenga datos y obtenga el valor correspondiente de acuerdo con el valor clave.
• ClearData (): Borre los datos almacenados en el objeto DataTransfer
• setDragImage (ImageUrl, log x, long y): use el elemento img para establecer el icono de arrastrar y soltar
//Ejemplo:
Target.adDeventListener ('dragStart', function (e) {
var fs = e.datatransfer.files; // Obtener la lista de objetos de archivo de arrastre y soltar objeto flielist
var dt = e.datatransfer; // propiedad dataTransfer como evento de arrastrar y soltar
dt.effectallowed = 'copy';
dt.setData ('Text/Plain', 'Hello');
dt.setDragimage (dragicom, -10, -10);
});
3. Arrastre y suelte la vista previa de la imagen de carga:
Ideas:
1. Familiary con los cuatro eventos del elemento de destino de arrastre de archivo. Nota: El comportamiento predeterminado se bloquea en los eventos Ondragover y Ondrop.
2. Después de arrastrar y soltar, obtenga la colección de objetos del archivo: e.datatransfer.files
3. Lise cada objeto de archivo en la colección, juzga el tipo de archivo y el tamaño del archivo, y realice las operaciones correspondientes si se especifica el tipo.
4. Lea el objeto de información del archivo: New FileReader (), que tiene métodos como leer el objeto de archivo como DataUrl: ReadAsDataurl (objeto de archivo), eventos activados después de una lectura exitosa: Evento de Onload, etc., this.Result es los datos de lectura
5. Realice el procesamiento lógico correspondiente en varios eventos en el objeto Filereader
HTML:
<Viv> <p> ¡Arrastre el archivo de imagen a esta área! </p> </div>
Recuento de carga total: <span id = 'total'> 100 </span>
JQ:
<script type = "text /javaScript"> $ (function () { / *pensamientos: *1. Esté familiarizado con los cuatro eventos del elemento de destino del objetivo de arrastre de archivo. Nota: el comportamiento predeterminado se bloquea en el ondragover y los eventos de ondrop *2. Tipo especificado*4. $ (". Container"). Get (0); Op.html ('¡Arrastre el archivo de imagen a esta área!'); colección // Imprimir consolla.log (fs.length); console.log (fs [i] .size); $ ("#Total"). Html (e.total); oimg.attr ("src", this.result); Carga, AJAX envía el archivo, cargue el archivo binario}}}} else {alerta ('por favor cargue el archivo de imagen!'); </script>Imagen de reproducción:
Resumen: Combinar el conocimiento de la API del evento de arrastrar y soltar, el objeto DataTransfer y el objeto de lectura de archivos Filelist, etc., para lograr el efecto de vista previa de la carga simple de arrastre y caída de las imágenes. ¡Necesita conocer la relación y el uso de un objeto y aclarar las ideas de implementación!
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.