Red de conocimiento informático - Espacio del host - Necesito un js o jquery que pueda cargar imágenes en lotes y obtener una vista previa de ellas. Urgente~~~urgente~~~urgente~~~urgente

Necesito un js o jquery que pueda cargar imágenes en lotes y obtener una vista previa de ellas. Urgente~~~urgente~~~urgente~~~urgente

Proyectos de carga web que se adaptan a tus necesidades.

1. Introducir recursos

El uso de Web Uploader para cargar archivos requiere la introducción de tres recursos: JS, CSS y SWF.

2.Html

Primero, debe preparar un botón y un contenedor para guardar información sobre los archivos agregados. lista de información.

Seleccionar imagen

< p />

3.Javascript

Crear una instancia de Web?Uploader/?Inicializar Web Uploader

var.uploader.create({

/?Si se cargan archivos automáticamente después de seleccionarlos

auto:?true,

//?ruta del archivo swf

swf:? BASE_URL. ?+????'/js/Uploader.swf',

/?Servidor de recepción de archivos

servidor:?/server/fileupload.php',

//?Botón para seleccionar un archivo. Opcional

//?Un archivo interno creado en función de la ejecución actual, que puede ser un elemento de entrada o Flash

pick:?# filePicker',

//?Solo permite la selección de archivos de imagen

aceptar:?{

title:?images',

extensiones:?'gif,jpg,jpeg,bmp,png',

tiposmime:?'image/*'

}

});

p>

Escuche el evento fileQueued y cree una vista previa de la imagen a través de uploader.makeThumb.

PD: Lo que obtenemos aquí son los datos de la URL, e IE6 e IE7 no admiten la vista previa directa. Puedes hacer la vista previa usando FLASH o del lado del servidor.

//Al agregar un archivo

uploader.on(?' fileQueued',?function(?file?)?{

var?$li?=?$(

'

''?+

''?+?nombre.archivo?+?

'?+

'

),

$img?=?$li.find('img');

//? $list es la instancia de jQuery contenedor

$list.append(? $li ?) ;

//?Crear miniaturas

/?Este método no se puede llamar si no es un archivo de imagen

//?thumbnailWidth? x?thumbnailHeight? para?100?x?100

uploader.makeThumb(?file,?function(?error,?src?)?{

if(?error?) ?{

$img.replaceWith(' No se puede obtener una vista previa');

return;

}

$img attr(?' src',?src?);

},?thumbnailWidth,?thumbnailHeight?);

});

Luego, en el archivo Durante el proceso de carga, uploadSuccess, uploadFailure y uploadComplete corresponden a las alarmas de estado de carga restantes de los eventos uploadProgress, uploadSuccess, uploadEnterprise, uploadSuccess, uploadError y uploadComplete respectivamente. //Crea una barra de progreso en tiempo real mientras cargas archivos.

uploader.on(? uploadProgress',?function(?archivo,?porcentaje?)?{

var?$li?=?$(?' #'+archivo. id?),

$percent?=?$li.find('.progress?span');

/?Evitar creación duplicada

if( ?!$porcentaje.longitud?)?{

$porcentaje?=?$('

')

.appendTo(? $li?)

.find('span');

}

$percent.css(? ancho' ,?percentage?*?100?+?' %'?) ;

}});

/?El archivo se cargó correctamente, la clase de éxito se agregó al proyecto y el estilo se utiliza. La etiqueta se cargó exitosamente.

uploader.on(?' uploadSuccess',?function(?file?)?{

$(?' #'+file.id?).addClass('upload- state-done');

});

/?La carga del archivo falló y se muestra un error de carga.

uploader.on(?' uploadError',?function(?file?)?{

var?$li?=?$(?' #'+file.id? ),

$error?$li.find('div.error');

//?Evitar la creación repetida

if(?!$error .length?)?{

$error?=?$('').appendTo(? $li?);

}

$error.text('La carga falló');

});

//? Complete la carga, ya sea exitosa o no, Primero elimine la barra de progreso.

uploader.on(?' uploadComplete',?function(?file?)?{

$(?' #'+file.id?).find('.progress ').remove();

});

Para obtener más detalles, consulte el código fuente js.

上篇: Si quieres comprar joyas de plata, ¿dónde puedes comprarlas (precio asequible, en Beijing)? 下篇: ¿Qué debo hacer si el cristal exterior de la pantalla de mi teléfono móvil está roto?

Artículos populares