Introduzir recursos
O upload de arquivos usando o uploader da Web requer a introdução de três recursos: JS, CSS e SWF.
<!-Apresentando CSS-> <link rel = "Stylesheet" type = "text/css" href = "webupLoader paster/webuploader.css"> <!-Introdução JS-> <script type = "text/javasscript" src = " inicialização e será exibido mais tarde->
Upload de arquivo
O WebUploader contém apenas a implementação subjacente dos uploads de arquivos e não inclui a parte da interface do usuário. Portanto, você pode reproduzir livremente os aspectos interativos. O seguinte demonstrará como implementar uma versão simples.
Clique no botão Selecionar arquivo abaixo e clique em Iniciar Upload para experimentar esta demonstração.
Parte html
Primeiro, prepare a estrutura DOM, incluindo três partes: contêineres que armazenam informações de arquivo, botões de seleção e botões de upload.
<div id = "uploader"> <!-usado para armazenar informações do arquivo-> <div id = "thelist"> </div> <div> <div id = "picker"> selecione Arquivo </div> <botão ID = "ctlbtn"> Iniciar upload </botão> </div> </div>
Inicialize o upload da web
Para detalhes, consulte a seção de comentários do código.
var uploader = webuploader.create ({// SWF File Path SWF: base_url + '/js/uploader.swf', // File Reception server. elemento de entrada ou flash.Mostrar seleção do usuário
Como o WebUploader não lida com a lógica da interface do usuário, é necessário ouvir o evento Filequeed para implementá -lo.
// Quando um arquivo é adicionado ao uploader.on ('fileQueed', function (file) {$ list.append ('<div id = "' + file.id + '' '' + '' <h4> ' + file.name +' '</h4>' '' <p>Arquivo de upload de progresso
Quando o arquivo é enviado, o upload da Web enviará um evento UploadProgress, que contém o objeto de arquivo e o progresso atual do upload do arquivo.
// Crie uma barra de progresso a ser exibida em tempo real durante o upload do arquivo. uploader.on ('uploadprogress', função (arquivo, porcentagem) {var $ li = $ ('#' + file.id), $ percentual = $ li.find ('. Progress .progress-Bar'); // Evite a criação repetida de if (! '</div>').Sucesso de arquivo e processamento de falhas
Se o upload do arquivo falhar, o evento UploadError será enviado e se o arquivo for enviado com sucesso, o evento UploadSuccess será enviado. Independentemente do sucesso ou falha, o evento UploadComplete será acionado após o upload do arquivo.
uploader.on ('uploadsuccess', function (file) {$ ('#'+file.id) .find ('p.state'). text ('upload');}); uploader.on ('uploadError', function (file) {$ ('#'+file.id) .find ('p.state'). text ('erro de upload');}); uploader.on ('uploadcomplete', function (file) {$ ('#'+file.id) .find ('. Progress'). Fadeout ();}); uploader.on ('uploadcomplete', function (file) {$ ('#'+file.id) .find ('. Progress'). Fadeout ();});Upload de imagem
Comparado com os uploads de arquivos comuns, esta demonstração demonstra: filtragem de arquivos, visualização de imagem, upload de compactação de imagem e outras funções.
Html
Para implementar a demonstração como acima, você primeiro precisa preparar um botão e um contêiner para armazenar a lista de informações de arquivo adicionada.
<!-DOM Estrutura Parte-> <div id = "uploader-Demo"> <!-Usado para armazenar item-> <div id = "FILELIST"> </div> <div id = "FilePicker"> Selecione fotos </div> </div>
JavaScript
Crie uma instância do upload da web
// Inicialize o uploader da web var uploader = webUploader.create ({// se deve fazer o upload automaticamente após selecionar o arquivo.auto: true, // SWF File Path SWF: base_url + '/js/uploader.swf', // File Server. Server.: 'http://webuploader.duapp.com/server/fileupload.php', // selecione o botão de arquivo. 'GIF, JPG, JPEG, BMP, PNG', MIMETIPES: 'Image/*'}});Ouça o evento Filequeed e crie a visualização da imagem através do uploader.makethumb.
PS: O que você ganha aqui são dados de URL de dados e o IE6 e o IE7 não suportam visualização direta. A visualização pode ser concluída com o Flash ou o servidor.
// Quando um arquivo é adicionado, uploader.on ('filequeed', function (file) {var $ li = $ ('<div id = "' + file.id + '">' + '' <mg> ' +' <div> ' + file.name +' </div> '' '</div>' '), $ img = $ li.find (' iMg '); ); );Então o restante é o prompt de status de upload. Quando o processo de upload de arquivo é carregado, o upload é bem -sucedido, o upload falhou e o upload é concluído, o uploadProgress, o uploadsuccess, o UploadError e o UploadComplete Events são respectivamente correspondentes aos eventos de uploadProgress, UploadSuccess, UploadError e UploadClete.
// Crie uma barra de progresso a ser exibida em tempo real durante o upload do arquivo. uploader.on ('uploadProgress', função (arquivo, porcentagem) {var $ li = $ ('#'+file.id), $ percentual = $ li.find ('. Progresso'); // Evite a criação repetida se (! .find ('span');} $ %.css ('width', porcentagem * 100 + '%'); // O arquivo é enviado com sucesso, adicione uma classe de sucesso ao item e marque o upload com estilo. uploader.on ('uploadsuccess', function (file) {$ ('#'+file.id) .addclass ('upload-state-done');}); // Falha no upload do arquivo e um erro de upload foi exibido. uploader.on ('uploadError', function (file) {var $ li = $ ('#'+file.id), $ error = $ li.find ('div.error'); // evite criação repetida se (! // Depois que o upload for concluído, ele é bem -sucedido ou falhado, exclua a barra de progresso primeiro. uploader.on ('uploadComplete', function (arquivo) {$ ('#'+file.id) .find ('. Progress'). remover ();});O exposto acima é o conhecimento relevante introduzido para você usando o uploader da Web para obter o upload de vários arquivos. 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!