arquivo navegador de upload e download de grandes quantidades

Eu uso SWFUpload em 2010, quando os arquivos como a solução principal para uploads em massa. Veja o artigo: versão WEB de um seleto vários arquivos para soluções de carregamento em lote (swfupload).

Eu uso arquivos plupload em 2013 como a solução principal para uploads em massa. Veja o artigo: versão WEB de um seleto vários arquivos para upload lote soluções (Plupload)

Em recente componente de upload WebUploader código aberto aprendizagem Baidu, e escreveu uma série de exemplos para registro. WebUploader desvantagem é que não é uma boa interface de ready-made, esta interface precisa de sua própria alcançar. Alguns alto grau de liberdade.

WebUploader por Baidu WebFE (FEX), a equipe desenvolveu um simples baseado em HTML5, FLASH, complementado por componente de upload de arquivos moderno. Em navegadores modernos que pode dar a desempenhar plenamente as vantagens do HTML5, enquanto não abandonar dominante navegador IE, siga a operação FLASH original, compatível com IE6 +, iOS 6 +, android 4+. Dois run-time, da mesma forma que exige que o usuário escolha arbitrária. Navegador suporte IE6, IE7, IE8, IE9, IE10, ie11, firefox, cromo, borda. Operando suporte do sistema para todas as plataformas: Windows, Mac, Linux pasta apoio upload e download, upload e arquivos em massa download, diretório hierárquico para salvar.

 

Função na descrição WebUploader:

 

Resume grandes carregamentos de arquivo

Suporte para grandes carregamentos de arquivo (100G +) e currículo, você pode fechar o navegador, reinicie o sistema ainda continuar a carregar.
Open source
fornece ASP.NET, JSP, PHP exemplos e código fonte, que fornece JSP MySQL, Oracle, configuração do SQL Server e banco de dados código de exemplo.

Fragmento, concorrente

o fragmento de ligação concorrente, um grande arquivo em múltiplos, upload simultâneo, melhorar significativamente a velocidade da grande carregamento de arquivo.

Quando problemas de rede causa erros de transmissão, só precisa retransmitir a fatia errada, ao invés de todo o arquivo. Além de transmissão mais fragmentado do tempo real o progresso de rastreamento upload.

De pré-visualização, de compressão

Suporte para populares jpg formatos de imagem, jpeg, gif, bmp, png visualização e compressão, salvando a transmissão de dados da rede.

meta análise das informações em jpeg, para uma variedade de orientação feito o tratamento certo, ao mesmo tempo todos os originais de dados meta retenção de upload de fotos após a compressão.

arquivos add multi-canal

Suporta arquivos multi-selecionar, tipo de filtro, arrastar e soltar (arquivos e pastas), função colar imagem. Fazer upload de um caminho de arquivo especificado local não precisa selecionar o arquivo, clicando em um botão.

Colar função reflecte-se principalmente na imagem quando há dados na área de transferência quando (ferramentas de captura de tela, tais como QQ (Ctrl + ALT + A), clique com o botão direito sobre a imagem clique na página para copiar), Ctrl + V pode ser adicionada a este ficheiro de imagem.

HTML5 & FLASH

Compatível com os principais navegadores e versões do navegador baixa, interface consistente para conseguir um apoio de dois em tempo de execução, os usuários não se preocupam com o que o kernel para uso interno. E suporte para o navegador IE6, IE8.

Ao mesmo tempo parte do Flash não faz qualquer UI relacionadas com o trabalho, fácil de se preocupam com os usuários do Flash para estender e necessidades de negócio customize.

operação IO realizado com base no modo de memória mapeada, dar a desempenhar plenamente o desempenho do sistema operacional.
MD5 segundos passar

 

Quando o grande tamanho do arquivo, a quantidade de tempo relativamente longo, faça verificar o valor md5 arquivo antes de apoio upload, você pode ignorar a consistência.

Se o fim do serviço e front-end unificado mudanças do algoritmo, tomar seções MD5, pode aumentar consideravelmente a verificação de desempenho, consumindo cerca de 20ms.

Escalável, pode ser dividida

O uso do mecanismo destacável, os vários independência funcional tornou-se um widget, você pode misturar livremente.

AMD utiliza a organização especificação de código, clareza, fácil de expandir jogadores avançados.

Carregar pasta

Apoiar 100.000 + nível currículo pasta upload.

Apoiar estrutura hierárquica diretório preservação, informações em nível de banco de dados podem ser armazenados no banco de dados após upload.
Fornecer MySQL, Oracle, suporte de banco de dados SQL Server.

Suporte pasta currículo, atualizar o navegador, reinicie ainda ser capaz de continuar a carregar.

Fazer upload de suporte cross-domain.

suporte completo para a plataforma PC
suporta Windows, MacOS, Linux. suporte do sistema operacional para a localização, o apoio para o programa de segurança da informação do governo.
Windows, que suporta baixo versão do sistema: Windows XP.
Quais navegadores incluem: IE6, IE7, IE8 (x86 , x64), IE9 (x86, x64), IE10 (x86, x64), IE11 (x86, x64), 360 navegador de segurança, 360 navegador velocidade, navegador QQ , navegador Sogou, Maxthon (viagem) 1.X navegador, Maxthon (Maxthon) 2.x navegador, Firefox, Chrome, Opera 23+

 

A: O seguinte é o uso do componente WebUploader que permite aos clientes para selecionar mais de um arquivo, selecione o arquivo e, em seguida, enviado para a solução de arquivo de lote servidor.

Vamos primeiro olhar para interface do cliente renderizações. (Arquivos, o upload em lote Multi-selecionar, upload progresso de exibição)

1) display:

 

 

2) seleção de arquivo múltipla:

 

                                          

 

3) Indicador do progresso do carregamento

  

                                      

 

                     

Descrição: ver acima WebUploader padrão é de 3 threads simultaneamente fazer upload de arquivos juntos. Se você precisa aumentar o número de concorrentes, ou reduzir o número de concorrentes. Você pode modificar tópicos propriedade, que é permitir que o número máximo de uploads simultâneos.

 

3) carregado com sucesso exibição

 

                      

II: código específico passos:

 

O primeiro passo, a ser concluída o seguinte exemplo, devemos ser componentes WebUploader prontos.

1) WebUploader: WebUploader você pode visitar o site oficial: http: //www.webuploader.net, neste site você pode baixar para o componente e de demonstração.

 

O segundo passo, como mostrado no exemplo de uma estrutura de directório:

1. A estrutura do diretório principal

 

2. js Este exemplo usados ​​do arquivo de script e arquivos CSS.

  

Uma terceira etapa, a parte frontal da interface WEB operacional convidado preparado como se segue [WebUploaderFileByBaidu2.aspx, UploaderFileByBaidu.ashx]

 

1) o código do cliente front-end, onde o código é a seguinte WebUploaderFileByBaidu2.aspx, arquivo WebUploaderFileByBaidu2.aspx.cs, basta usar o código padrão, sem adicionar qualquer código.

 

O código HTML

 

<% @ Page Language = "C #" AutoEventWireup = "true" CodeBehind = "WebUploaderFileByBaidu2.aspx.cs" Inherits = "WebApplication1.WebUploaderFileByBaidu2" %> <html xmlns = "http <DOCTYPE html!>: //Www.w3. org / 1999 / xhtml "> <head runat =" server "> <meta http-equiv =" "content = "Content-Type text / html; charset = utf-8"/>

    <Title> WebUploader exemplar File Upload </ title>

 

    <Script type = "text / javascript" src = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"> </ script>  

      <Link href = "Scripts / webuploader / webuploader.css" rel = "stylesheet" />

    <Script type = "text / javascript" src = "Scripts / webuploader / webuploader.min.js"> </ script>

 

    <Link href = "https://cdn.bootcss.com/bootstrap/3.0.3/css/bootstrap.min.css" rel = "stylesheet" />  

    <Link href = "Scripts / style.css" rel = "stylesheet" />

    <Link href = "Scripts / demo.css" rel = "stylesheet" />

    <Link href = "Scripts / font-awesome.css" rel = "stylesheet" />

 

     <Script type = "text / javascript">

         var applicationPath = window.applicationPath === ""? "": Window.applicationPath || "../../";

         arquivo // uploads jQuery (function () {

             var $ = jQuery,

                 $ List = $ ( '# fileList'),

                 $ BTN = $ ( '# ctlBtn'),

                 state = 'pendentes',

                 carregador;

             Uploader = WebUploader.create ({

                 image // não comprimido

                 redimensionar: false,

 

                 // caminho do arquivo swf

                 swf: applicationPath + 'Script / webuploader / Uploader.swf',

 

                 // servidor de recebimento de arquivos.

                 servidor: 'UploaderFileByBaidu.ashx',

 

                 // Selecione o arquivo botão. Opcional.

                 // dentro da corrente de execução é criado, pode ser elemento de entrada, pode ser flash.

                 escolher: '#picker'

 

             });

 

             // Quando há um arquivo de entrada para adicionar

             uploader.on ( 'fileQueued', function (arquivo) {

 

                 $ List.append ( '<div id = "' + file.id + '" class = "item">' +

                     '<H4 class = "info">' + file.name + '</ h4>' +

                     '<Class P = "estado"> à espera de carregamento ... </ p>' +

                 '</ Div>');

 

             });

 

             // Criar uma barra de progresso de upload de arquivos durante a exibição em tempo real.

             uploader.on ( 'uploadprogress', function (arquivo, percentual) {

 

                 var $ = $ ( '#' + -I),

                     $ Cento = $ li.find ( 'progresso .progress-bar.');

                 // evitará a duplicação criado

                 if (! $ percent.length) {

                     $ Cento = $ ( '<div class = "progresso-progresso listrado ativo">' +

                       '<Div class = "progresso" role = "progresso" style = "width: 0%">' +

                       '</ Div>' +

                     '</ Div>') appendTo ($ li) .find ( 'progredir-bar..');

                 }

                 . $ Li.find texto ( 'p.state') ( 'upload');

                 $ Percent.css ( 'largura', percentagem * + 100 '%');

 

             });

 

             uploader.on ( 'uploadSuccess', function (arquivo) {

                 . $ ( '#' + File.id) .find texto ( 'p.state') ( 'carregado');

             });

 

             uploader.on ( 'Uploaderror', function (arquivo) {

                 $ ( '#' + File.id) .find ( 'p.state') texto ( 'Carregar erro');

             });

 

             uploader.on ( 'uploadComplete', function (arquivo) {

                 $ ( '#' + File.id) .find (' progresso.) FadeOut (.);

             });

             uploader.on ( 'all', function (tipo) {

                 if (tipo === 'startUpload') {

                     = Estatais carregamento ';

                 } Else if (tipo === 'stopUpload') {

                     estado = 'parou';

                 } Else if (digite === 'uploadFinished') {

                     state = 'feito';

                 }

                 if (estado === 'upload') {

                     $ Btn.text ( 'pause upload');

                 } outro {

                     $ Btn.text ( 'Start upload');

                 }

 

             });

 

             $ Btn.on ( 'clique', function () {

                 if (estado === 'upload') {

                     uploader.stop ();

                 } outro {

                     uploader.upload ();

                 }

             });

         });

    </ Script> </ head>

<Body>

 

    <Div class = "container de líquido">

        <Div class = "col-md-10">

        <Div class = "linha"> File Upload Exemplo: </ div>

         <Div class = "linha">

  <Div id = "upload" class = "wu-exemplo">

    <! - arquivo usado para armazenar informações ->

    <Div id = "fileList" class = "upload-list"> </ div>

    <Div class = "Botões">

        <Div id = "picker" class = "btn btn-primária"> Selecione Arquivo </ div>   

 

    </ Div>

</ Div>

             </ Div>

 

          <Div class = "linha">

 

    </ Div>

        <Div class = "linha"> <button id = class "ctlBtn" = "btn btn-default"> 开始 上传 </ button> </ div>

    </ Div>

    <Div>

    </ Div>

    </ Div>

</ Body> </ html>

 

 

Os resultados finais do código de cima é exibida, como mostrado abaixo:

 

 

 

2) receber um front-end arquivos carregados de utilizador, e salva o arquivo para o diretório especificado. arquivo UploaderFileByBaidu.ashx usando o código padrão não precisa adicionar qualquer código. arquivo de código UploaderFileByBaidu.ashx.cs é a seguinte: 

using System; utilizando System.Collections.Generic; utilizando System.IO; usando System.Linq; using System.Text; using System.Web; namespace WebApplication1

{

    /// <summary>

    /// UploaderFileByBaidu EXPOSIÇÃO DE MOTIVOS

    /// </ summary>

    UploaderFileByBaidu classe pública: IHttpHandler

 

    {

        Public void ProcessRequest (HttpContext context)

        {

            context.Response.ContentEncoding = Encoding.UTF8;

            if (context.Request [ "REQUEST_METHOD"] == "Opções") 

          {

                context.Response.End ();

            }

 

            Salvar Arquivo();

        }

 

        /// <summary>

        /// arquivo de save operação

        /// </ summary>

        /// <param name = "basePath"> </ param>

        vazio SaveFile (basePath string = "~ / upload / images /") privada

        {

    

             basePath = FileHelper.GetUploadPath ();

            cadeia Datedir = DateTime.Now.ToString ( "AA-MM-dd");

            corda UPDIR = basePath + "\\" + Datedir;

            corda extname = string.Empty;

            corda fullname = string.Empty;

            string $ filename = string.Empty;    

 

            HttpFileCollection arquivos = System.Web.HttpContext.Current.Request.Files;

 

            se (files.Count == 0)

            {

                var result = "{\" JSON-RPC \ ": \ "2.0 \", \ "erro \": \ "保存 失败 \", \ "id \": \ "id \"}";

                System.Web.HttpContext.Current.Response.Write (resultado);

            }

            if (Directory.Exists! (UPDIR))

                Directory.CreateDirectory (UPDIR);

 

            var sufixo = arquivos [0] .ContentType.Split ( '/');

            var _suffix = sufixo [1] .Equals ( "jpeg", StringComparison.CurrentCultureIgnoreCase)? "": Sufixo [1];

            var _temp = System.Web.HttpContext.Current.Request [ "nome"];

 

            if (! string.IsNullOrEmpty (_temp))

            {

                nome do ficheiro = _temp;

            }

            outro

            {

                Aleatória rand = novo aleatório (24 * (int) DateTime.Now.Ticks);

                nome do ficheiro = rand.Next () + "" + _Suffix;

            }

 

             fullname = string.Format ( "{0} \\ {1}", UPDIR, nome do ficheiro);

            arquivos [0] .SaveAs (FullName);

            var _result = "{\" JSON-RPC \ ": \ "2.0 \", \ "resultado \": nula \ " id \": \ "" + nome + "\"}";

            System.Web.HttpContext.Current.Response.Write (_result);

 

        }

 

        bool pública IsReusable

        {

 

            obter

            {

                retorna falso;

            }

        }

    }

}

 

 Passo quatro: classe auxiliar de arquivo

Resumo /// <summary> /// FileHelper Descrição /// </ summary> classe pública FileHelper

{

 

    pública FileHelper ()

    {

 

        //

        // TODO: lógica construtor acrescentar aqui

        //}

 

    /// <summary>

    /// Obter diretório de upload

    /// </ summary>

    /// <returns> </ returns>

     GetUploadPath public static string ()

        {

 

          caminho cadeia = HttpContext.Current.Server.MapPath ( "~ /");

          cadeia nomedir = GetDirName ();

          corda uploadDir = path + "\\" + dirname;

          CreateDir (uploadDir);

          voltar uploadDir;

        }

 

    /// <summary>

    /// obter um diretório temporário

    /// </ summary>

    /// <returns> </ returns>

     GetTempPath public static string ()

     {

 

         caminho cadeia = HttpContext.Current.Server.MapPath ( "~ /");

         cadeia nomedir = GetTempDirName ();

         corda uploadDir = path + "\\" + dirname;

         CreateDir (uploadDir);

         voltar uploadDir;

     }

 

        private static string GetDirName ()

        {

            retorno System.Configuration.ConfigurationManager.AppSettings [ "uploaddir"];

 

        }

 

        private static string GetTempDirName ()

        {

            retorno System.Configuration.ConfigurationManager.AppSettings [ "tempdir"];

        }

 

    estática public void CreateDir (string path)

        {

                if (System.IO.Directory.Exists! (caminho))

                {                 

 

                    System.IO.Directory.CreateDirectory (caminho);

                }

        }

}

 

O quinto passo, Web.config informações de configuração de arquivo.

<? Xml version = "1.0" encoding = "utf-8"?> <Configuration>

  <configSections>

    <! - Para mais informações sobre configuração do Entity Framework, visite http://go.microsoft.com/fwlink/?LinkID=237468 ->  

  </ ConfigSections>

 

  <appSettings>

    <Add key = "uploaddir" value = "Upload" />

    <Key add = valor "tempdir" = "temp" />

  </ AppSettings>

 

  <System.web>

    <Compilation debug = "true" targetFramework = "4.0" />

 

    <Authentication mode = "Windows" />

     <HttpRuntime maxRequestLength = "2147483647" appRequestQueueLimit = "1200" executionTimeout = "1200" />

    <Páginas controlRenderingCompatibilityVersion = "3.5" ClientIDMode = "AutoID" />

  </System.web>

    <System.webServer>

    <Segurança>

      <RequestFiltering>

        <RequestLimits maxAllowedContentLength = "2147483647"> </ RequestLimits>

      </ RequestFiltering>

    </ Security>

  </System.webServer> </ configuration>

 

O sexto passo, após a realização de upload, os arquivos são salvos no diretório data correspondente. Abaixo.

 

A maior parte da lógica de código de back-end é o mesmo, atualmente suporta MySQL, Oracle, SQL. Antes de usar a necessidade de configurar o banco de dados, você pode consultar-me a escrever este artigo: http://blog.ncmem.com/wordpress/2019/08/09/web%E5%A4%A7%E6%96%87%E4 % BB% B6% E4% B8 
% 8A% E4% BC% A0% E8% A7% A3% E5% 86% B3% E6% 96% B9% E6% A1% 88 / recebidos no grupo discutido "374 992 201" juntos

Acho que você gosta

Origin www.cnblogs.com/songsu/p/12567152.html
Recomendado
Clasificación