explorador de archivos de carga y descarga de grandes cantidades

Yo uso swfupload en 2010 cuando los archivos como la solución principal para la carga a granel. Véase el artículo: versión web de un grupo selecto de varios archivos para soluciones de carga por lotes (swfupload).

Yo uso los archivos plupload en 2013 como la solución principal para la carga a granel. Véase el artículo: versión web de un grupo selecto de múltiples archivos para soluciones de carga por lotes (Plupload)

En código abierto reciente subir componente WebUploader aprendizaje Baidu, y escribió una serie de ejemplos para grabar. WebUploader inconveniente es que no es una buena interfaz ya hecho, esta interfaz necesita su propia lograr. Algunos alto grado de libertad.

WebUploader por Baidu WebFE (FEX) equipo desarrolló un simple basado en HTML5, FLASH, complementado por el componente de carga de archivos moderna. En los navegadores modernos que pueden poner en pleno juego las ventajas de HTML5, mientras no abandone la corriente principal del navegador IE, siga el funcionamiento del flash original, compatible con IE6 +, iOS 6+, androide 4+. Dos tiempo de ejecución, de la misma manera pide al usuario elegir arbitrariamente. apoyo IE6, IE7, IE8, IE9, IE10, IE11, Firefox, Chrome, el navegador de borde. Sistemas operativos compatibles para todas las plataformas: Windows, Mac, Linux Carga carpeta de soporte y descarga, carga y descarga de archivos a granel, jerárquica de directorios para guardar.

 

Función en la descripción WebUploader:

 

Reanudar la carga de archivos grandes

Soporte para archivos grandes de archivo (100G +) y hoja de vida, puede cerrar el navegador, reinicie el sistema todavía continúa cargando.
El código abierto
proporciona ASP.NET, JSP, ejemplos de PHP y el código fuente, que proporciona JSP MySQL, Oracle, configuración SQL Server y base de datos de código de ejemplo.

Fragmento, concurrente

fragmento de unión paralela, un archivo grande en múltiple, carga simultánea, mejorar en gran medida la velocidad de la gran carga de archivos.

Cuando los problemas de red causa errores de transmisión, sólo tienen que retransmitir la rebanada mal, en lugar de todo el archivo. Además de la transmisión más fragmentado de progreso en tiempo real de seguimiento de carga.

Vista preliminar, la compresión

El apoyo a populares formatos de imagen JPG, JPEG, GIF, BMP, PNG y vista previa de compresión, el ahorro de la transmisión de datos a la red.

análisis de la información de metadatos en formato JPEG, para una variedad de orientación hizo el tratamiento adecuado, al mismo tiempo, todos los originales de metadatos de carga de retención de imágenes después de la compresión.

archivos de complemento multicanal

de archivo soporta multi-seleccionar, tipo de filtro, arrastrar y soltar (archivos y carpetas), función de pegar la imagen. Sube una ruta de archivo especificada local no necesita seleccionar el archivo haciendo clic en un botón.

Pegar función se refleja sobre todo en la imagen cuando hay datos en el portapapeles al (herramientas de captura de pantalla, como QQ (Ctrl + Alt + A), haga clic en la foto haz un clic en la página para copiar), Ctrl + V se pueden añadir a este archivo de imagen.

HTML5 y Flash

Compatible con los navegadores y versiones de navegadores importante baja, interfaz consistente para lograr un apoyo de dos de tiempo de ejecución, los usuarios no se preocupan por lo que el kernel para uso interno. Y apoyar para el navegador Internet Explorer 6, Internet Explorer 8.

Al mismo tiempo parte de flash no hace ninguna interfaz de usuario relacionada con el trabajo, fácil se preocupa por los usuarios de Flash para extender y necesidades de negocio de personalización.

IO operación realizada con base en el modo de mapeo de memoria, poner en pleno juego el rendimiento del sistema operativo.
MD5 segundos pasan

 

Cuando el tamaño del archivo, la cantidad de tiempo relativamente largo, hacer verificar el valor MD5 archivo antes de la carga de apoyo, puede omitir la consistencia.

Si el final del servicio y front-end unificados cambios de algoritmo, tome secciones MD5, puede mejorar enormemente la verificación del rendimiento, el consumo de alrededor de 20 ms.

Escalable, se pueden dividir

El uso del mecanismo desmontable, los diversos independencia funcional se convirtió en un widget, puede mezclarse libremente.

AMD utiliza la organización especificación de códigos, la claridad, fácil de expandir los jugadores avanzados.

Subir carpeta

Apoyar a 100.000 + el nivel de carga carpeta hoja de vida.

Apoyar la estructura jerárquica de directorios preservación, la información a nivel de base de datos puede ser almacenada en la base de datos después de cargar.
Proporcionar MySQL, Oracle, soporte de base de datos SQL Server.

Soporte carpeta hoja de vida, actualizar el navegador, reinicie todavía será capaz de seguir subiendo.

Sube el apoyo de varios dominios.

Soporte completo para la plataforma PC
compatible con Windows, MacOS, Linux. Soporte del sistema operativo para la localización, el apoyo para el programa de seguridad de la información gubernamental.
Ventanas que soporta bajo versión del sistema: Windows XP.
¿Qué navegadores son: IE6, IE7, IE8 (x86 , x64), IE9 (x86, x64), IE10 (x86, x64), EI11 (x86, x64), 360 seguridad del navegador, el navegador de velocidad 360, QQ navegador , Sogou navegador, Maxthon (viaje) del navegador 1.x, Maxthon (Maxthon) 2.x navegador, Firefox, Chrome, Opera 23+

 

A: El siguiente es el uso del componente WebUploader que permite a los clientes seleccionar más de un archivo, seleccione el archivo y luego se suben a la solución de servidor de archivos por lotes.

Veamos primero en la interfaz representaciones cliente. (Multi-seleccionar archivos, carga por lotes, pantalla de progreso de carga)

1) interfaz de pantalla:

 

 

2) selección de archivos múltiples:

 

                                          

 

3) Indicación de progreso de carga

  

                                      

 

                     

Descripción: véase más arriba WebUploader predeterminado es de 3 hilos simultáneamente cargar archivos juntos. Si es necesario aumentar el número de concurrentes, o reducir el número de concurrentes. Puede modificar las discusiones propiedad, que es permitir que el máximo número de cargas simultáneas.

 

3) cargado correctamente pantalla

 

                      

II: código específicas del proceso:

 

El primer paso, que se completará el siguiente ejemplo, tenemos que estar listos WebUploader componentes.

1) WebUploader: WebUploader se puede visitar el sitio web oficial: http: //www.webuploader.net, en este sitio se puede descargar al componente y de demostración.

 

El segundo paso, como se muestra en un ejemplo de la estructura de directorios:

1. La estructura principal del directorio

 

2. JS En este ejemplo se utilizan archivos de secuencia de comandos y archivos CSS.

  

Un tercer paso, la parte delantera de la interfaz WEB operativo huésped preparó como sigue [WebUploaderFileByBaidu2.aspx, UploaderFileByBaidu.ashx]

 

1) código de cliente front-end, donde el código es el siguiente WebUploaderFileByBaidu2.aspx, WebUploaderFileByBaidu2.aspx.cs archivo, basta con utilizar el código predeterminado, sin añadir ningún código.

 

Código html

 

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

    <Título> WebUploader ejemplar Carga de archivos </ 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 || "../../";

         // carga de archivos de jQuery (function () {

             var $ = jQuery,

                 $ List = $ ( '# fileList'),

                 $ BTN = $ ( '# ctlBtn'),

                 estado = 'pendiente',

                 cargador;

             cargador = WebUploader.create ({

                 // imagen no comprimida

                 cambiar el tamaño: falso,

 

                 // ruta del archivo SWF

                 SWF: ApplicationPath + 'Guión / webuploader / Uploader.swf',

 

                 // servidor de recepción de archivos.

                 servidor: 'UploaderFileByBaidu.ashx',

 

                 // Seleccionar el archivo del botón. Opcional.

                 // se crea en el interior de la ejecución actual, que puede ser elemento de entrada, puede ser flash.

                 recoger: '#picker'

 

             });

 

             // Cuando hay un archivo entrante para agregar

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

 

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

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

                     '<P class = "estado"> esperando para subir ... </ p>' +

                 '</ Div>');

 

             });

 

             // Crear una barra de progreso de carga de archivos durante la visualización en tiempo real.

             uploader.on ( 'uploadprogress', function (archivo, porcentaje) {

 

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

                     $ = $ Li.find ciento ( 'progreso .progress-bar.');

                 // evitar la duplicación creada

                 if (! $ percent.length) {

                     $ Ciento = $ ( '<div class = "progreso progreso de rayas activa">' +

                       '<Div class = papel = estilo "progressbar" "progressbar" = "width: 0%">' +

                       '</ Div>' +

                     '</ Div>') appendTo ($ li) .find ( 'barra de progreso..');

                 }

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

                 $ Percent.css ( 'width', porcentaje * 100 + '%');

 

             });

 

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

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

             });

 

             uploader.on ( 'uploaderror', function (archivo) {

                 $ ( '#' + File.id) .find ( 'p.state') texto ( 'Error de carga');

             });

 

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

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

             });

             uploader.on ( 'all', la función (tipo) {

                 si (tipo === 'startUpload') {

                     = Estatales 'subir';

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

                     estado = 'pausa';

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

                     estado = 'hecho';

                 }

                 si (estado === 'subir') {

                     $ Btn.text ( 'pausa de carga');

                 } Else {

                     $ Btn.text ( 'Inicio de carga');

                 }

 

             });

 

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

                 si (estado === 'subir') {

                     uploader.stop ();

                 } Else {

                     uploader.upload ();

                 }

             });

         });

    </ Script> </ head>

<Body>

 

    <Clase div = "contenedor de fluido">

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

        <Div class = "fila"> Carga de archivos Ejemplo: </ div>

         <Div class = "fila">

  <Div id = "cargador" class = "wu-ejemplo">

    <! - archivo usado para almacenar la información ->

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

    <Div class = "btns">

        <Id = clase "selector" Div = "btn btn-primaria"> Seleccionar archivo </ div>   

 

    </ Div>

</ Div>

             </ Div>

 

          <Div class = "fila">

 

    </ Div>

        <Div class = "fila"> <botón de id = clase "ctlBtn" = "btn btn-default"> 开始 上传 botón </> </ div>

    </ Div>

    <Div>

    </ Div>

    </ Div>

</ Body> </ html>

 

 

Los resultados finales del código anterior se muestra como se muestra a continuación:

 

 

 

2) que recibe una archivos subidos por los usuarios de front-end, y guarda el archivo en el directorio especificado. UploaderFileByBaidu.ashx archivo usando el código predeterminado no necesita añadir ningún código. UploaderFileByBaidu.ashx.cs archivo de código es el siguiente: 

using System; usando System.Collections.Generic; using System.IO; usando System.Linq; usando System.Text; using System.Web; WebApplication1 espacio de nombres

{

    /// <summary>

    /// UploaderFileByBaidu explicativo memorando

    /// </ summary>

    UploaderFileByBaidu clase pública: IHttpHandler

 

    {

        ProcessRequest pública vacío (HttpContext contexto)

        {

            context.Response.ContentEncoding = Encoding.UTF8;

            si (context.Request [ "REQUEST_METHOD"] == "OPCIONES") 

          {

                context.Response.End ();

            }

 

            Guardar el archivo();

        }

 

        /// <summary>

        /// Guardar archivo de operación

        /// </ summary>

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

        SaveFile vacío (cadena basePath = "~ / Subir / Imágenes /") privada

        {

    

             basePath = FileHelper.GetUploadPath ();

            cadena Datedir = DateTime.Now.ToString ( "yy-MM-dd");

            cadena updir = basePath + "\\" + Datedir;

            extname String = String.Empty;

            NombreCompleto String = String.Empty;

            nombre de archivo de secuencia = String.Empty;    

 

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

 

            si (files.Count == 0)

            {

                resultado var = "{\" JSONRPC \ ": \ "2,0 \", \ "error \": \ "保存 失败 \", \ "id \": \ "id \"}";

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

            }

            si (Directory.Exists! (updir))

                Directory.CreateDirectory (UPDIR);

 

            sufijo var = Archivos [0] .ContentType.Split ( '/');

            var _suffix = sufijo [1] .equals ( "jpeg", StringComparison.CurrentCultureIgnoreCase)? "": Sufijo [1];

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

 

            if (! String.IsNullOrEmpty (_temp))

            {

                nombre de archivo = _temp;

            }

            más

            {

                Aleatorio RAND = nuevo (24 * (int) DateTime.Now.Ticks) Random;

                nombre de archivo = rand.Next () + "" + _Suffix;

            }

 

             FullName = string.Format ( "{0} \\ {1}", UPDIR, nombre de archivo);

            archivos [0] .SaveAs (FullName);

            var _result = "{\" JSONRPC \ ": \ "2,0 \", \ "número \": null, \ "id \": \ "" + nombre de archivo + "\"}";

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

 

        }

 

        public bool IsReusable

        {

 

            obtener

            {

                falso retorno;

            }

        }

    }

}

 

 Paso cuatro: clase de ayuda archivo

Resumen /// <summary> /// FileHelper Descripción /// </ summary> public class FileHelper

{

 

    FileHelper pública ()

    {

 

        //

        // TODO: la lógica del constructor Sube aquí

        //}

 

    /// <summary>

    /// Obtener directorio de subida

    /// </ summary>

    /// <retornos> </ retornos>

     GetUploadPath public static string ()

        {

 

          string path = HttpContext.Current.Server.MapPath ( "~ /");

          dirname String = GetDirName ();

          cadena uploaddir = ruta + "\\" + nombredir;

          CreateDir (uploaddir);

          volver uploaddir;

        }

 

    /// <summary>

    /// obtener un directorio temporal

    /// </ summary>

    /// <retornos> </ retornos>

     GetTempPath public static string ()

     {

 

         string path = HttpContext.Current.Server.MapPath ( "~ /");

         dirname String = GetTempDirName ();

         cadena uploaddir = ruta + "\\" + nombredir;

         CreateDir (uploaddir);

         volver uploaddir;

     }

 

        cadena estática privada GetDirName ()

        {

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

 

        }

 

        cadena estática privada GetTempDirName ()

        {

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

        }

 

    estático public void CreateDir (string path)

        {

                si (System.IO.Directory.Exists! (camino))

                {                 

 

                    System.IO.Directory.CreateDirectory (ruta de acceso);

                }

        }

}

 

El quinto paso, la información de configuración Web.config archivo.

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

  <configSections>

    <! - Para obtener más información sobre la configuración de Entity Framework, visite http://go.microsoft.com/fwlink/?LinkID=237468 ->  

  </ ConfigSections>

 

  <appSettings>

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

    <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>

    <Seguridad>

      <RequestFiltering>

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

      </ RequestFiltering>

    </ Seguridad>

  </System.webServer> </ configuration>

 

El sexto paso, después de realizar carga, los archivos se guardan en el directorio de la fecha correspondiente. A continuación.

 

La mayor parte de la lógica del código de fondo es la misma, actualmente soporta MySQL, Oracle, SQL. Antes de usar la necesidad de configurar la base de datos, usted me puede referirse a escribir este artículo: 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 / acogido en el grupo discutió "374 992 201" junto

Supongo que te gusta

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