Antes de apresentar o texto principal, deixe -me apresentar o conhecimento do PLUPLOAD.
Introdução ao PLUPLOAD
O PLUPLOAD é desenvolvido pelos desenvolvedores da TINYMCE, fornecendo um plug-in de upload altamente disponível para o seu sistema de gerenciamento de conteúdo ou programas de upload semelhantes. Atualmente, o PLUPLOAD está dividido em uma API do núcleo e um componente de fila de upload jQuery, que permite usá -lo diretamente ou personalizá -lo.
Recurso do PLUPLOAD
O PLUPLOAD usa componentes jQuery como componente da fila para selecionar arquivos e fazer upload de arquivos.
O PLUpload usa flash, Silverlight, HTML5, Gears, BrowserPlus e FileUpload para fazer upload dos mecanismos de tecnologia de arquivos.
O PLUPLOAD permite que a personalização use a API Core Plupload para selecionar arquivos e fazer upload de arquivos.
O JavaScript é usado para ativar a caixa de diálogo Seleção de arquivos. Esta caixa de diálogo de seleção de arquivos pode ser definida para permitir que os usuários selecionem um arquivo separado ou vários arquivos. O tipo de arquivo selecionado também pode ser restrito, para que o usuário possa selecionar apenas o arquivo apropriado especificado, como o JGP; GIF.
O PLUpload permite a personalização de alguns eventos durante o processo de upload e escreva seu próprio método de processamento.
O upload do arquivo selecionado é independente da página e formulário onde está localizado. Cada arquivo é carregado separadamente, o que garante que o script do lado do servidor possa lidar com um único arquivo com mais facilidade em um momento. Para informações específicas, visite o site oficial do PLUPLOAD: http://www.plupload.com/
Antecedentes: O controle de upload de arquivo front-end usado no projeto foi carregado e tudo ficou em paz por um tempo. "Boas notícias" veio da cena, e o cliente queria usar o sistema de iPad e queria fazer upload de fotos. O mestre do cliente deu um tapa na testa e teve que trabalhar horas extras em P&D. Como todos sabem, o upload depende do flash, portanto não é possível nos sistemas iOS e Mac. Então, depois de um pouco do Google, encontrei o Plupload. É mais fácil começar.
Página Código HTML:
A etiqueta principal contém os arquivos JS necessários
<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 = azul"> </sCript>
<!-PLUPLOAD->
<script type = "text/javascript" src = "plupload/plupload.full.js"> </script>
Elementos de página na etiqueta corporal
<!-Trigger a caixa pop-up-> <a id = "uPLOPLBTN" href = "#"> upload de arquivo </a> <div id = "uploadContent" style = "display: nenhum; altura: 300px; overflow-x: hidden; suportes a menos; href = "javascript: void (0);"> selecione Arquivo </a> </div> <div id = "uploadfilequeue" style = "borda: 1px Solid #a7c5e2; altura: 228px; largura: 350px;"> </div> </div> <pred = "Console">
Código na tag de script
var globalUploader; function _plupload () {var uploader = new Plupload.Uploader ({RunTimes: 'html5, flash, Silverlight, html4', browse_button: 'upload', // o atributo de identificação do dom Browser_button: '/PloadAction!localUpload.action',//receive Actionflash_swf_url Carregado por arquivo:' /folder/js/plupload/moxie.swf'.silverlight_xap_url: '//15F: '100MB', // Limite o tamanho do arquivo MIME_TYPES: [// Limite o tipo de arquivo de upload {Title: "Image Files", Extensions: "jpg, gif, png"}]}, init: {Postinit: function () {$ ('#uPLearFileue'). Html (''; Antes do FUNCIMENTO ANTES DO FUNCIONALIZADO {// Antes de fazer o upload depois de clicar no botão. $ .ajax ({url: "/pasta/pessoal/personalaction! getNewfileName.action", tipo: "post", assíncrono: false, dados: {'upFileName': file.name, 'globalpid': globalpid}, datatype: "json", sucesso: function (dados) {/ set ': settyt the Parâmetro}, datAtype: "json", success: function (data) {/ set' {/ set ': parâmetro}, datatype: "json", sucesso: function (data) {/ set' {//Set ': parâmetro}, datatype: "json", succcess: function (data) {/ sétimo {upfilename: data.newfilename, upFileType: file.name.split (".") [file.name.split ("."). length - 1], // sufix upFilesize: file.size, parentid: globalpid}); arquivo ["+file.name+"] falhou ao fazer upload ", ''); // $ ('#uploadify'). uploady ('cancel', file.id); // cancelar uma tarefa de upload pressionando pressionando id}});}, href = "javascript: _plupload_removefile (' +i +', ' +file.id +')"> </a> ') </span> <b> </b> <div> <div> </div> </div> </div> </div>'); i ++;});}, uploadProgress: function (up, arquivo) {// Clique para iniciar o upload e o disparo. Aqui você pode adicionar uma barra de progresso, usando o arquivo.PercentDocument.getElementById (file.id) .getElementsByTagName ('b') [0] .innerhtml = '<span>-' + file.percent + "%</span>"; //%$ ('#'). '%'); // barra de progresso}, erro: function (up, err) {// Erro Trigger document.getElementById ('console'). Innerhtml + = "/nerror#" + err.code + ":" + err.message;}, fileUplOADed: function (up, arquivo, e informação) {//). avaliar ("(" + info.Response + ")"); // os dados retornados pelo servidor, você pode modificar a lista de arquivos na página, etc.}, uploadcomplete: function (up, arquivos) {// todos os arquivos são acionados após o upload // disparar quando todos os arquivos em uma fila são uploados.}}}); PopUpDialog () {ArtDialog ({id: 'File-upload', Title: 'File Upload', corrigido: true, bloqueio: true, conteúdo: $ ("#uploadContent") [0], botão: [{name: 'start upload', focus: focal, true: function:) {{) {{name:); function () {$ ('#UPLOPFILEQUEUE'). html (''); // Exclua o conteúdo da fila de upload globalUploader.files.splice (0, globalUploader.files.length); // limpe o conteúdo na fila de uplote retorno true;}]], Close: Close: function () {$ ('#UPLOPFILEQUEUE'). fila}});} $ (function () {$ ('#uploadbtn'). click (function () {popUpDialog ();}); _ plupload ();});Não vou escrever o código de segundo plano. Usei a ação de back -end do STRUTS2 para receber o arquivo recebido usando o arquivo de arquivo privado. Altere o outro nome para NULL. Ainda não sei como definir esse valor no controle.
Então este é o efeito
Se você deseja adicionar esses estilos CSS à barra de progresso, você tem controle
<style type = "text/css"> #uploadFileQueUe {Position: relativamente; esquerda: 0; topo: 0; borda: 1px sólido #a7c5e2; margem-bottom: 5px; altura: 228px; largura: 350px; overflow-x: hidden; */cor de fundo: #FFF; -Webkit-Border-Radius: 3px; Radio de borda: 3px; Fonte: 11px Verdana, Genebra, Sans-Serif;/* margem-top: 5px; */margem: 5px 5px 5px 5px; max-lar: 350px; preenchimento: 10px;}. Uploadify-Progress {Background-Color: #e5e5e5; margin-top: 10px; largura: 100%;}. Uploy-program-bar {Borden-coror:} # # # # # # # # # #00; 1px;} </style>O efeito final. O que, eu também quero fazer o upload para excluir o arquivo na garfo da fila, ok
Adicione isso com estilo
.uploadify-ite-item .Cancel A {Background: url ('JS/Uploadify-Cancel.png') 0 0 sem repetição; Float: Direita; Altura: 16px; Indent Text: -9999px; Width: 16px;}Obviamente, você também precisa adicionar código JS excluído. Há Remonefile (arquivo) na API oficial aqui, mas não é fácil de usar aqui. Portanto, outro método é usado para dividir (num, comprimento), o NUM é excluído do primeiro e o comprimento é o número de exclusão.
função _plupload_removefile (redovelum, fileId) {globalUploader.files.splice (redovelum, 1); // exclua alguns arquivos $ (fileId) .fadeout ();}Efeito final.
O exposto acima é o PLUPLOAD+ARTDIALOG INTROVADO PELO EDITOR para obter arquivos de upload de várias plataformas. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!