Este artigo descreve o método de fazer upload de vários arquivos e limitar o número de arquivos no SWFupload. Compartilhe -o para sua referência, como segue:
Swfupload é um componente de upload de arquivo de cliente com base no Flash e JavaScript.
Arquivo Handlers.js
Faixa de arquivo completa (Filequeed) →
Conclua a seleção de arquivo (FileDialogComplete) → Iniciar o upload (uploadStart) → Envie o processamento (uploadProgress) → Upload Success (UploadSuccess) → Compleção de upload (UPLOPLECOMPET) →
Queuecplete
Como mostrado acima, se as funções de retorno de chamada acima forem executadas em sequência por arquivos de seleção única, deve-se notar que vários arquivos são selecionados. Filequeed e QueuEComplete serão executados apenas uma vez, enquanto FileDialogComplet ... → O uploadComplete será executado uma vez por arquivo.
Depois de concluir as funções básicas com referência ao exemplo oficial, a imitação Ganji adota um método iframe.
Para atingir o limite do número de visualização de miniaturas e o número de imagens excluídas e carregadas
Exibir miniaturas, gerar botões para excluir miniaturas,
Os thumbimages exibem divs de miniaturas para a página dos pais
src_s é o endereço de miniatura gerada
src_b é o endereço de imagem original
ServerData é os dados retornados pela página de processamento de upload da imagem. Será devolvido no formato de sucesso | Endereço de miniatura | Endereço original | Endereço original
função uploadsuccess (arquivo, serverdata) {try {var resultado = serverdata.split ('|'); if (resultado [0]! = 'Sucesso') {var Progress = new FileProgress (arquivo, this.customSettings.progressTarget); progress.Sterror (); Progress.setStatus (ServerData); Progress.toggleCancel (false); } else {var progress = new FileProgress (arquivo, this.customsettings.progressTarget); progress.SetComplete (); progress.setStatus ("upload completo"); Progress.toggleCancel (false); var img_url_s = resultado [1]; var img_url_b = resultado [2]; addImage (img_url_s, img_url_b); }} catch (ex) {this.debug (ex); }} função addImage (src_s, src_b) {var newdiv = parent.document.createElement ("div"); newdiv.style.margin = "5px"; newdiv.style.Height = "60px"; newdiv.style.width = "80px"; newdiv.style.border = "1px Solid #7F9DB9"; newdiv.style.cssfloat = "esquerda"; newdiv.style.stylefloat = "esquerda"; newdiv.style.Position = "relativo"; var newa = parent.document.createElement ("a"); newa.className = "delete"; newa.title = "delete"; newa.href = "javascript ::"; newa.OnClick = function () {deldiv (newdiv);}; var newInput_s = parent.document.createElement ("input"); newinput_s.type = "Hidden"; newinput_s.value = src_s; newinput_s.name = "image_s []"; newa.appendChild (newinput_s); var newInput_b = parent.document.createElement ("input"); newinput_b.type = "Hidden"; newinput_b.value = src_b; newinput_b.name = "image_b []"; newa.appendChild (newinput_b); var newImgdiv = parent.document.createElement ("div"); var newImg = parent.document.createElement ("img"); newimg.style.Height = "60px"; newimg.style.width = "80px"; newimgdiv.appendChild (newImg); newdiv.appendchild (newImgdiv); newdiv.appendchild (newa); parent.document.getElementById ("thumbimages"). ApndendChild (newDiv); if (newimg.filters) {try {newimg.filters.item ("dximageTransform.microsoft.alpha"). opacity = 0; } catch (e) {// Se não for definido inicialmente, o navegador lançará um erro. Isso o definirá se ainda não estiver definido. newImg.style.filter = 'Progid: dximageTransform.microsoft.alpha (opacity =' + 0 + ')'; }} else {newimg.style.opacity = 0; } newImg.onload = function () {Fadein (newImg, 0); }; newImg.src = src_s;} função fadein (elemento, opacidade) {var reduDOPacityBy = 5; taxa var = 30; // 15 fps if (opacidade <100) {opacity += reduçãopacityby; if (opacidade> 100) {opacidade = 100; } if (element.filters) {try {element.filters.item ("dximageTransform.microsoft.alpha"). opacidade = opacidade; } catch (e) {// Se não for definido inicialmente, o navegador lançará um erro. Isso o definirá se ainda não estiver definido. element.style.Filter = 'Progid: dIMAGETRANSForm.Microsoft.alpha (Opacity =' + Opacity + ')'; }} else {element.style.opacity = opacity / 100; }} if (opacidade <100) {setTimeout (function () {fadein (elemento, opacidade);}, taxa); }}Em relação ao processamento do número restante de arquivos carregados
função queueciclEte (numFilesUploaded) {this.setButtondisabled (false); var stats = this.getStats (); var status = document.getElementById ("divstatus"); status.innerhtml = "carregado" + stats.successful_uploads + "arquivos, você também pode fazer upload" + parseint (this.settings ['file_upload_limit']-stats.successful_uploads) + "arquivos";} função deldiv (mydiv) { // swfu veja swfu na página iframe swfu = new swfupload (configurações); VAR Stats = swfu.getStats (); estatísticas.successful_uploads--; swfu.setstats (estatísticas); var status = document.getElementById ("divstatus"); status.innerhtml = "upload" + stats.successful_uploads + "um arquivo, também pode ser carregado" + parseint (swfu.settings ['file_upload_limit']-stats.successful_uploads) + "arquivos";}Pode ser devido ao uso do iframe
Swfu na função deldiv não pode ser substituído por isso
O efeito geral é como mostrado na figura:
Depois de fazer upload da imagem e modificar as informações novamente, você precisa tirar quantas fotos foram enviadas e combiná -las em Swfupload
Obtenha o caminho da imagem carregado do fundo através do PHP e entregue -o a uma matriz JS através do Smarty
var iMg_arr = new Array (); {if ISSET ($ img_arr)} {nome da seção = 'img_arr' loop = $ img_arr} img_arr [{$ smarty.section.img_arr.index}] = novo Array ('{$ img_arr [img_arr] .images_s}', '{$ img_arr [img_arr] .images_b}'); {/seção} {/if}Consulte o documento Swfupload para obter as seguintes informações
flashready ()
Esta função de evento é um evento interno e não pode ser reescrito. Este evento é acionado quando o Swfupload é instanciado e o flash carregado completa todas as operações de inicialização.
Lembrete: Swfupload_loaded_handler nas configurações correspondentes
Então defina SWFupload_loaded_handler em configurações de SWFUPLOAD
swfupload_loaded_handler: carregado,
Em seguida, defina a função carregada em manipuladores.js
função carregada () {if (img_arr.length! = 0) {for (val em img_arr) {addImageFromdb (img_arr [val] [0], img_arr [val] [1], this); }}}Ligue para a função addImageFromDB para modificar o número de imagens carregadas e gerar miniaturas de imagens carregadas
// Inicialize a função de imagem carregada addImageFromdb (src_s, src_b, swfu) {var stats = swfu.getStats (); estats.successful_uploads ++; swfu.setstats (estatísticas); var status = document.getElementById ("divstatus"); status.innerHTML = "Uploaded<font color='green'>" + stats.successful_uploads + "</font> Zhang, you can also upload<font color='red'>"+ parseInt(swfu.settings['file_upload_limit']-stats.successful_uploads) +"</font>Zhang"; addImage (src_s, src_b);}For more information about JavaScript related content, please check out the topics of this site: "Summary of JavaScript switching effects and techniques", "Summary of JavaScript search algorithm skills", "Summary of JavaScript animation effects and techniques", "Summary of JavaScript errors and debugging techniques", "Summary of JavaScript data structures and algorithm skills", "Summary of Javascript Algoritmos e Técnicas de Traversal "e" Resumo do Uso do Javascript Mathematic Operations "
Espero que este artigo seja útil para a programação JavaScript de todos.