Antes de introducir el texto principal, permítanme presentar el conocimiento de PLUPLOAD.
Introducción a la plupia
PLUPLOAD es desarrollado por desarrolladores de TinyMCE, proporcionando un complemento de carga altamente disponible para su sistema de administración de contenido o programas de carga similares. PLUPLOAD se divide actualmente en una API central y un componente de cola de carga jQuery, que le permite usarlo directamente o personalizarlo usted mismo.
Característica de plumas
PLUPLOAD utiliza componentes jQuery como componente de cola para seleccionar archivos y cargar archivos.
PLUPLOAD utiliza Flash, Silverlight, HTML5, Gears, BrowserPlus y FileUpload para cargar motores de tecnología de archivos.
PLUPLOAD Permite que la personalización use la API Core PLUPLOAD para seleccionar archivos y cargar archivos.
JavaScript se usa para activar el cuadro de diálogo Selección de archivos. Este cuadro de diálogo Selección de archivos se puede configurar para permitir a los usuarios seleccionar un archivo separado o múltiples archivos. El tipo de archivo seleccionado también se puede restringir, por lo que el usuario solo puede seleccionar el archivo apropiado especificado, como JGP; GIF.
PLUPLOAD Permite la personalización de algunos eventos durante el proceso de carga y escriba su propio método de procesamiento.
La carga del archivo seleccionado es independiente de la página y el formulario donde se encuentra. Cada archivo se carga por separado, lo que garantiza que el script del lado del servidor pueda manejar un solo archivo más fácilmente en un momento. Para obtener información específica, visite el sitio web oficial de PLUPLOAD: http://www.plupload.com/
Antecedentes: el control de carga del archivo frontal utilizado en el proyecto se cargó, y todo fue pacífico por un tiempo. "Buenas noticias" vino de la escena, y el cliente quería usar el sistema de iPad y quería subir fotos. El maestro del cliente le dio una palmada en la frente y tuvo que trabajar horas extras en I + D. Como todos saben, la carga depende de Flash, por lo que no es posible en los sistemas iOS y Mac. Entonces, después de un poco de Google, encontré la plupia. Es más fácil comenzar.
Página Código HTML:
La etiqueta de cabeza contiene los archivos JS necesarios
<script type = "text/javaScript" src = "js/jQuery-1.9.1.min.js">/script>
<!-diálogo de arte->
<script type = "text/javaScript" src = "artdialog/artdialog.source.js? skin = blue"> </script>
<!-plupload->
<script type = "text/javaScript" src = "plupload/plupload.full.js"> </script>
Elementos de página en la etiqueta del cuerpo
< id = "uploadify" href = "javaScript: void (0);"> seleccione archivo </a> </div> <divi ID = "uploadFilequeue" style = "border: 1px sólido #a7c5e2; altura: 228px; ancho: 350px;"> </div> </div> <pre id = "console"> </ pre>
Código en la etiqueta de script
var globalUploader; function _plupload () {var uploader = new plupload.uploader ({runTimes: 'html5, flash, silverlight, html4', browse_button: 'uploadify', // el atributo de identificación del objeto DOS que explota el archivo en la página que contiene la página '. browser_button: '/uploadactionlosslocalupload.action',//receive actionflash_swf_url uploaded por archivo:' /folder/js/plupload/moxie.swf',silverlight_xap_url: '/folder/js/plupload/moxie.xap',filter '100mb',//Limit upload file size mime_types: [//Limit upload file type{title : "Image files", extensions : "jpg,gif,png"}]},init: {PostInit: function() {$('#uploadfileQueue').html('');},UploadFile : function(up,file){//Frequently triggered after ANTERIOR}, ANTERIOR: FUNCIÓN: FUNCIÓN (UP, FILE) {// Con frecuencia antes de cargar después de hacer clic en el botón, puede consultar el archivo con el mismo nombre, verificar el espacio restante, etc. // verificar si hay un archivo duplicado. $ .AJAX ({url: "/carpeta/personal/personalaction! getNewFileName.action", type: "post", async: false, data: {'upfileName': file.name, 'globalpid': globalpid}, dataType: "json", still: function (data) {// establece el parámetro up.setoption ('multipart},}, "json", s. {upFileName: data.newFileName, upFileType: file.name.split (".") [file.name.split ("."). Longitud - 1], // sufrejando UpFilesize: file.size, parentId: globalpid});}, error: function (xmlhtttprequest, textstataus, err, {lo siento (lo siento, " file ["+file.name+"] no se pudo cargar ", ''); // $ ('#uploadify'). uploadify ('cancel', file.id); // cancele una tarea de carga presionando ID}});}, href =" javascript: _plupload_removefile ('+i+' ''+file.id+') "</a> + file.name + '(' + plupload.formatsize (file.size) + ') </span> <b> </b> <div> <div> </div> </div> </div> </div>'); i ++;});}, uploadProgress: function (upc, file) {// haga clic para comenzar a subir y disparar. Aquí puede agregar una barra de progreso, usando file.percentDocument.getElementById (file.id) .getElementsByTagName ('b') [0] .innerhtml = '<span>-' + file.percent + "%</span>"; // porcentaje $ ('#' + file.id) .find ('. Carging-prenderse-bar'). Css ('width', file '%'); // Progress Bar}, Error: Function (Up, Err) {// Error disparador de documento eval ("(" + info.Response + ")"); // Los datos devueltos por el servidor, puede modificar la lista de archivos en la página, etc.}, uploadComplete: function (up, archivos) {// Todos los archivos se activan después de cargar // disparos cuando todos los archivos en una cola están cargados. PopUpDialog () {artDialog ({id: 'file-supload', title: 'file upload', fijo: true, lister: true, content: $ ("#uploadContent") [0], botón: [{name: 'intar ortoad', focus: true, callback: function () {GlobalUploader.Start (); return false;}, name: {name: {Cellup function () {$ ('##uploadFilequeue'). html (''); // elimina el contenido de la cola de carga globaluploader.files.splice (0, globaluploader.files.length); // Borrar el contenido en el retorno de la cola de carga verdadero;}}], cerca:: function () {$ ('##uploadFilequeue'). html (''); // Eliminar el contenido de la cola de carga globaluploader.files.splice (0, globaluploader.files.length); // borrar el contenido en la carga cola}});} $ (function () {$ ('#uploadbtn'). click (function () {popupDialog ();}); _ plupload ();});No escribiré el código de fondo. Utilicé la acción de backend Struts2 para recibir el archivo recibido mediante el archivo de archivo privado. Cambie el otro nombre a NULL. Todavía no sé cómo establecer este valor en el control.
Entonces este es el efecto
Si desea agregar estos estilos CSS a la barra de progreso, tiene control
<style type = "text/css"> #uploadFilequeue {posición: relativo; izquierda: 0; arriba: 0; borde: 1px sólido #a7c5e2; margen-bottom: 5px; Height: 228px; width: 350px; overflow-x: hidden; overflow-y: auto;}. upload-coly-iteue-item {/*/*/*/* #F5F5F5; */background-color: #fff; -webkit-border-radio: 3px; border-radio: 3px; fuente: 11px Verdana, Ginebra, sans-serif;/* margin-top: 5px; */margin: 5px 5px 5px 5px; max-width: 350px; padding: 10px;}. zoadify-progrese {background-color: #e5e5e5; margin-top: 10px; width: 100%;}. uploadify-progress-bar {fondo de fondo: #0099ff; altura: 3px; width: 1px;}El efecto final. Qué, también quiero subir para eliminar el archivo en la bifurcación de colas, OK
Agrega esto con estilo
.UPloadify-queue-Item .cancel a {fondo: url ('js/uploadify-cancel.png') 0 0 no-repeat; float: right; altura: 16px; text-indent: -9999px; ancho: 16px;}Por supuesto, también debe agregar el código JS eliminado. Hay remoje (archivo) en la API oficial aquí, pero no es fácil de usar aquí. Entonces, otro método se usa para dividir (num, longitud), num se elimina desde el primero, y la longitud es el número de eliminación.
función _plupload_removeFile (removenum, fileId) {globaluploader.files.splice (removenum, 1); // Eliminar algunos archivos $ (fileId) .fadeOut ();}Efecto final.
Lo anterior es el plupload+artdialog introducido por el editor para lograr archivos de carga multiplataforma. 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!