El componente de carga del archivo webuploader puede utilizar completamente las ventajas de HTML5 en los navegadores modernos, sin abandonar los navegadores IE convencionales, utilizando el tiempo de ejecución Flash original y es compatible con IE6+, iOS 6+, Android 4+. Los dos conjuntos de tiempo de ejecución, los usuarios pueden seleccionar el mismo método de llamada a voluntad. El uso de la carga concurrente de fragmentación de archivos grandes mejora enormemente la eficiencia de la carga de archivos.
1. Introducción de función
Fragmentación, concurrencia
Los fragmentos y la concurrencia se combinan para dividir un archivo grande en múltiples bloques y cargar simultáneamente, mejorando en gran medida la velocidad de carga de archivos grandes.
Cuando los problemas de la red causan errores de transmisión, solo necesita retransmitir el fragmento de error, no todo el archivo. Además, la transmisión de fragmentos puede rastrear el progreso de la carga más en tiempo real.
Vista previa, compresión
Admite formatos de imagen comunes JPG, JPEG, GIF, BMP, Vista previa de PNG y compresión para guardar la transmisión de datos de red.
Analice la meta información en JPEG y maneje correctamente varias orientaciones. Al mismo tiempo, después de la compresión, cargue y retenga todos los meta datos originales de la imagen.
Agregar archivos a través de múltiples canales
Admite selección de archivos múltiples, tipo de filtrado, arrastrar y soltar (archivo y carpeta) y funciones de pegado de imágenes.
La función de pegar se refleja principalmente en el hecho de que cuando hay datos de imagen en el portapapeles (herramientas de captura de pantalla como QQ (Ctrl + Alt + A), haga clic con el botón derecho en la imagen en la página web y haga clic en Copiar), Ctrl + V puede agregar este archivo de imagen.
Html5 y flash
Compatible con los navegadores convencionales, interfaces consistentes e implementar dos conjuntos de soporte de tiempo de ejecución, por lo que los usuarios no necesitan preocuparse por los kernels se usan internamente.
Al mismo tiempo, la parte Flash no realiza ningún trabajo relacionado con la interfaz de usuario, lo cual es conveniente para los usuarios que no se preocupan por la expansión de Flash y las necesidades comerciales personalizadas.
Pase de segundos MD5
Cuando el tamaño del archivo es grande y la cantidad es relativamente grande, admite la verificación del valor del archivo MD5 antes de cargar. Si es consistente, puede omitirlo directamente.
Si el servidor y el front-end modifican el algoritmo de manera uniforme y toman el segmento MD5, puede mejorar en gran medida el rendimiento de la verificación y tomar alrededor de 20 ms.
Fácil de expandir y desmontable
El mecanismo desmontable se adopta para separar las funciones en widgets y se puede igualar libremente.
El código se organiza utilizando especificaciones AMD, que es clara y clara, lo que hace que sea conveniente que los jugadores avanzados se expandan.
Introducir recursos
La carga de archivos con el cargador web requiere la introducción de tres recursos: JS, CSS y SWF.
< inicialización y se mostrará más tarde->
2. Subida de archivo
Webuploader solo contiene la implementación subyacente de las cargas de archivos y no incluye la parte de la interfaz de usuario. Por lo tanto, puedes jugar libremente los aspectos interactivos. Lo siguiente demostrará cómo implementar una versión simple.
Parte html
Primero, prepare la estructura DOM, incluidas tres piezas: contenedores que almacenan información del archivo, botones de selección y botones de carga.
<Div id = "Suboader"> <!-Se usó para almacenar información del archivo-> <div id = "thelist"> </div> <div> <divi ID = "picker"> seleccione Archivo </iv> <botón ID = "Ctlbtn"> Inicio Subiendo </botón> </div> </div>
Inicializar el cargador web
Para más detalles, mire la sección de comentarios en el código.
var uploader = webuploader.create ({// swf archivo ruta swf: base_url + '/js/uploader.swf', // servidor de recepción de archivos. Server: 'http://webuploader.duapp.com/server/fileupload.php', // seleccionar el botón de archivo. Opcional. // CREATALMENTE INTENTAL. Elemento o Flash.Mostrar selección de usuarios
Dado que el Webupploader no maneja la lógica de la interfaz de usuario, es necesario escuchar el evento FileQueue para implementarlo.
// Cuando se agrega un archivo al cola uploader.on ('filequeueD', function (file) {$ list.append ('<div id = "' + file.id + '">' + '<h4>' + file.name + '</h4>' + '<p> Wait a la carga ... </p>' + '</div>);});Progreso de carga de archivo
Cuando se cargue el archivo, el cargador web enviará un evento de carga de carga, que contiene el objeto del archivo y el progreso de carga actual del archivo.
// Cree una barra de progreso para mostrar en tiempo real durante la carga de archivos. uploader.on ('uploadProgress', function (archivo, porcentaje) {var $ li = $ ('#' + file.id), $ por ciento = $ li.find ('. '</div>'). appendTo ($ li) .find ('. Progress-bar');El éxito del archivo y el procesamiento de fallas
Si la carga de archivo falla, se enviará el evento SubloLOGErRor y si el archivo se carga correctamente, se enviará el evento de UploadSuccess. Independientemente del éxito o el fracaso, el evento SubloadComplete se activará después de cargar el archivo.
uploader.on ('uploadSuccess', function (file) {$ ('#'+file.id) .find ('p.state'). Text ('uploaded');}); uploader.on ('uploadError', function (file) {$ ('#'+File.id) .find ('p.state'). Text ('upload error';}); 'uploadComplete', function (file) {$ ('#'+file.id) .find ('. Progress'). FadeOut ();});3. Subir fotos
En comparación con las cargas de archivos ordinarios, esta demostración demuestra: filtrado de archivos, vista previa de imagen, carga de compresión de imágenes y otras funciones.
Html
Para implementar la demostración como se indica anteriormente, primero debe preparar un botón y un contenedor para almacenar la lista de información de archivo agregado.
<!-DOM Structure Part-> <div id = "por carga-demo"> <!-usado para almacenar el elemento-> <div id = "filelist"> </div> <div id = "filepicker"> seleccionar imágenes </div> </div>
Javascript
Crear una instancia de cargador web
// Inicializar Web uploadervar uploader = webuploader.create ({// si cargar automáticamente después de seleccionar el archivo. Auto: true, // swf archivo ruta swf: base_url + '/js/uploader.swf', // servidor de recepción de archivo. 'http://webuploader.duapp.com/server/fileUpload.php', // Seleccione el botón de archivo. 'gif, jpg, jpeg, bmp, png', mimetypes: 'image/*'}});Escuche el evento FileQueue y cree una vista previa de imagen a través de la carga.
PD: Lo que obtiene aquí son los datos de la URL de datos, y IE6 e IE7 no admiten una vista previa directa. La vista previa se puede completar con Flash o el servidor.
// Cuando se agrega un archivo, uploader.on ('filequeueD', function (file) {var $ li = $ ('<div id = "' + file.id + '">' + '<img>' + '<div>' + file.name + '</div>' + ' +' </div> ', $ img = $ li.find (' img '); // $ list es una lista de lister (contiene una lista de liater. );/Crear miniatura // Si es un archivo sin imagen, no necesita llamar a este método. src);Entonces el resto es el mensaje de estado de carga. Cuando se carga el proceso de carga de archivos, la carga es exitosa, la carga falló y la carga se completa, los eventos de carga de carga, uploadSuccess, uploadError y uploadComplete son respectivamente correspondientes a los eventos de carga de carga, uploadSuccess, uploadError y uploadComplete.
// Cree una barra de progreso para mostrar en tiempo real durante la carga de archivos. uploader.on ('uploadProgress', function (archivo, porcentaje) {var $ li = $ ('#'+file.id), $ por ciento = $ li.find ('. $ por ciento.css ('ancho', porcentaje * 100 + '%');}); // El archivo se carga correctamente, agregue una clase exitosa al elemento y marque la carga con estilo. uploader.on ('uploadSuccess', function (file) {$ ('#'+file.id) .AddClass ('upload-state-done');}); // El archivo de carga falló y se mostró un error de carga. uploader.on ('uploadErRor', function (file) {var $ li = $ ('#'+file.id), $ error = $ li.find ('div.error'); // evite la creación repetida if (! $ error.length) {$ error = $ ('<div> </div>'). APRESTO ($ li);} $ Error.text ('upload fallado'); se completa, es exitoso o fallido, elimine primero la barra de progreso. uploader.on ('uploadComplete', function (file) {$ ('#'+file.id) .find ('. progreso'). remove ();});Lo anterior es una introducción a cómo usar el complemento de carga de archivo de cargador web. Espero que sea útil para el aprendizaje de todos.