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->
Carga 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.
Haga clic en el botón Seleccionar archivo a continuación y luego haga clic en Inicio de carga para experimentar esta demostración.
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 ('Error de carga');}); uploader.on ('uploadComplete', function (file) {$ ('#'+file.id) .find ('. Progress'). FadeOut ();}); uploader.on ('uploadComplete', function (file) {$ ('#'+file.id) .find ('. Progress'). FadeOut ();});Carga de imágenes
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 el nivel web Web Var uploader = webuploader.create ({// si se debe 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 ('. .find ('span');} $ 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 (archivo) {$ ('#'+file.id) .AddClass ('upload-state-done');}); // Falló la carga de archivo 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 falló'); // Después de completar la carga, es exitoso o fallido, elimine primero la barra de progreso. uploader.on ('uploadComplete', function (file) {$ ('#'+file.id) .find ('. progreso'). remove ();});Lo anterior es el conocimiento relevante que se le presentó mediante el uso de la carga web para lograr la carga de múltiples archivos. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!