O componente de upload de arquivos do WebUploader pode utilizar completamente as vantagens do HTML5 nos navegadores modernos, sem abandonar os navegadores IE convencionais, usando o Flash Runtime original, e é compatível com o IE6+, iOS 6+, Android 4+. Os dois conjuntos de tempo de execução, o mesmo método de chamada pode ser selecionado pelos usuários à vontade. O uso da fragmentação de arquivos grandes, o upload simultâneo, melhora bastante a eficiência do upload de arquivos.
1. Introdução à função
Sharding, simultaneidade
O sharding e a simultaneidade combinam -se para dividir um arquivo grande em vários blocos e fazer upload simultaneamente, melhorando bastante a velocidade de upload de arquivos grandes.
Quando os problemas da rede causam erros de transmissão, você só precisa retransmitir o shard de erro, não o arquivo inteiro. Além disso, a transmissão do Shard pode rastrear o upload do progresso mais em tempo real.
Visualização, compressão
Suporta formatos de imagem comuns JPG, JPEG, GIF, BMP, Visualização PNG e compactação para salvar a transmissão de dados de rede.
Analise as meta informações no JPEG e lide corretamente várias orientações. Ao mesmo tempo, após a compactação, faça o upload e retenha todos os meta -dados originais da imagem.
Adicionar arquivos através de vários canais
Suporta múltiplas seleção de arquivos, filtragem de tipo, arrastar e soltar (arquivo e pasta) e funções de colagem da imagem.
A função de pasta é refletida principalmente no fato de que, quando há dados de imagem na área de transferência (ferramentas de captura de tela como QQ (Ctrl + Alt + A), clique com o botão direito do mouse na página da web e clique em Copiar), Ctrl + V pode adicionar este arquivo de imagem.
Html5 e flash
Compatível com os navegadores convencionais, interfaces consistentes e implementar dois conjuntos de suporte de tempo de execução, para que os usuários não precisem se preocupar com o que os kernels são usados internamente.
Ao mesmo tempo, a parte do flash não faz nenhum trabalho relacionado à interface do usuário, o que é conveniente para usuários que não se importam com as necessidades comerciais de expansão e personalizadas do Flash.
MD5 segundos passa
Quando o tamanho do arquivo é grande e a quantidade é relativamente grande, ele suporta a verificação do valor do arquivo MD5 antes do upload. Se for consistente, você pode ignorá -lo diretamente.
Se o servidor e o front-end modificarem o algoritmo uniformemente e tomarem o segmento MD5, ele poderá melhorar bastante o desempenho da verificação e tomar cerca de 20 ms.
Fácil de expandir e destacável
O mecanismo destacável é adotado para separar as funções nos widgets e pode ser correspondido livremente.
O código é organizado usando as especificações da AMD, o que é claro e claro, tornando conveniente para os jogadores avançados se expandirem.
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->
2. 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.
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>'). Appendto ($ li) .Find ('. Progresso-bar');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. P.). 'uploadcomplete', function (file) {$ ('#'+file.id) .find ('. Progress'). Fadeout ();});3. Carregue fotos
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
// Inicializa o upload do uploadervar da web = 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), $ % = $ li.find ('. $ %.css ('largura', porcentagem * 100 + '%');}); // O arquivo é carregado 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');}); // o upload do arquivo falhou 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 (! está concluído, é bem -sucedido ou falhado, exclua a barra de progresso primeiro. uploader.on ('uploadComplete', function (arquivo) {$ ('#'+file.id) .find ('. Progress'). remover ();});O exposto acima é uma introdução a como usar o plug-in de upload do arquivo de upload da web. Espero que seja útil para o aprendizado de todos.