Cómo subir imágenes en extjs
Copiar código
1 lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//ES" "http:// /www.w3.org/TR/xhtml1/DTD/xhtml1-transicional.dtd"gt;
2 lt;html xmlns="http://www.w3.org/1999/xhtml"gt ;
2 lt; p>
3 lt;headgt;
4 lt;titlegt;lt;/title gt;
5 lt;! --Inicio del framework ExtJs--gt;
6 lt;script type="text/javascript" src="/Ext/adapter/ext/ext-base.js"gt;lt;/scriptgt;
7 lt;script type="text/javascript" src="/Ext/ext-all.js"gt;lt;/scriptgt;
8 lt;script src= "/Ext/src/locale/ext-lang-zh_CN.js" type="text/ javascript"gt;lt;/scriptgt;
9 lt;link rel="stylesheet" type="texto /css" href="/Ext/resources/css/ext-all.css" /gt;
10 lt;! lt;! --Fin del marco ExtJs--gt;
11 lt; script type="text/javascript"gt
12 Ext.onReady(function () {
13 // Inicializa la propiedad Ext: Qtip en la etiqueta.
14 Ext.QuickTips.init();
15 Ext.form.Field.prototype.msgTarget = 'lado';
16 //Crear div Componente
17 var imagebox = new Ext. BoxComponent({
18 autoEl: {
19 estilo: 'ancho: 150 px; alto: 150 px; margen: 0px automático; borde: 1px sólido #ccc; alineación de texto: centro;
19 var imagebox = nuevo relleno superior: 20px; p>20 tag: div',
21 id: 'imageshow',
22 html: Actualmente no hay imágenes disponibles'
23 }
24 }
24 }.});
25 // Crear un campo de carga de texto
26 var file = new Ext.form .TextField ({
27 nombre: 'imgFile',
28 fieldLabel: 'Carga de archivo',
29 inputType: 'archivo',
30 enableBlank: false,
31 BlankText: consulte la imagen'
32 });
33 //Enviar controlador de botón
34 var btnsubmitclick = function () {
35 if (form.getForm().isValid()) {
36 form.getForm().submit( {
37 waitTitle: 'Por favor espera',
38 waitMsg: 'Subiendo...
39 éxito: función (formulario, acción) {
40 Ext.MessageBox.alert("Alerta", "¡Carga exitosa!");
41 document.getElementById('imageshow').innerHTML = ' img style="width; : 150px ;altura: 150px" src="' action.result.path '"/gt; ';
42 },
43 falla: función () {
44 Ext.MessageBox.alert("Consejo", "¡Falló la carga! ") )
45 }
46 });
47 }
48 }
49 / /Procesamiento del botón "Restablecer al hacer clic"
50 var btnresetclick = function () {
51 form.getForm().reset();
52 }
53 //
formulario
54 var formulario = new Ext.form.FormPanel({
55 fotogramas: verdadero,
56 archivos cargados: verdadero,
57 url: '/App_Ashx/Demo/Upload.ashx',
58 título: 'Título del formulario',
59 estilo: 'margen: 10px',
60 elementos: [imagebox, archivo],
61 botones: [{<
62 texto: 'Guardar',
63 controlador: btnsubmitclick
64 }, {
65 texto: 'Restablecer',
66 controlador: btnresetclick
67 }]
68 });
69 //formularios
70 var win = new Ext.Window({
71 título: 'ventana',
72 ancho: 476,
73 alto: 374,
74 redimensionable: verdadero,
75 modal: verdadero,
76 cerrables: verdadero,
77 maximizables: verdadero,
78 minimizables: verdadero,
79 buttonAlign: 'centro',
80 elementos: formulario
81 });
82 win.show();
83 }); /scriptgt;
85 lt;/headgt;
86 lt;bodygt;
86 lt;bodygt;
87 lt; !p>87 litros;! --
88 Descripción:
89 (1) var imagebox = new Ext.BoxComponent(): Crea una nueva etiqueta HTML.
90 La explicación oficial es la siguiente:
91 Luego se puede agregar al contenedor como hijo.
92 Para crear un BoxComponent basado en un elemento HTML en el momento del renderizado, use la opción de configuración autoEl, que toma la forma de la especificación DomHelper:
93 (2) autoEl: { estilo: '', etiqueta: 'div', id: 'imageshow', html: Aún no hay imagen'}. Defina los atributos de esta etiqueta html, como etiqueta: div, cuál es la identificación, etc.
94 Ejemplo oficial.
94 El ejemplo oficial es el siguiente:
95 var myImage = new Ext.BoxComponent({
96 autoEl: {
97 etiqueta: 'img',
98 src: '/images/mi-imagen.jpg'
99 }
100 });
101 (3) var file = new Ext.form.TextField(): crea un nuevo campo de carga de archivos.
102 (4) nombre: 'imgFile': nombre, esto es importante porque el servidor recibirá la imagen en base a este nombre.
103 (5) inputType: file': El tipo de formulario es tipo de archivo.
104 (6) waitTitle: 'Espere', waitMsg: 'Subiendo...': mensaje emergente durante el período de espera de carga. ,: Solicitar información durante el período de espera de carga.
105 (7) document.getElementById('imageshow').innerHTML = 'lt; img style="ancho: 150px; alto: 150px" src="' action.result.path '"/ gt ;'; Este es js nativo que reemplaza el valor de imageshow con una imagen.
106 --gt;
107 lt;/bodygt;
108 lt;/htmlgt;
Copiar código
Utilice un archivo de controlador general para interactuar con el servicio para cargar imágenes. El archivo fuente es el siguiente:
/App_Ashx/Demo/Upload.ashx
Copiar código<. /p>
1 usando System;
2 usando System.Web;
3 usando System.IO
4 usando System.IO; /p>
5
6 espacio de nombres HZYT.ExtJs.WebSite.App_Ashx.Demo
7 {
8 clases públicas Subir: IHttpHandler
9 {
10 public void ProcessRequest(Contexto HttpContext)
11 {
12 // Directorio virtual, se recomienda escribir la configuración file
13 String strPath = "/Upload/Image/";
14 //Directorio local del archivo
15 String dirPath = context.Server.MapPath( strPath);
16 //Recibir archivos
17 HttpPostedFile imgFile = context.Request.Files["imgFileFiles["imgFile"];
18 // Obtener la extensión del archivo
19 String fileExt = Path.GetExtension(imgFile.FileName).ToLower()
20 //Cambiar el nombre del archivo
21 String newFileName = DateTime.Now.ToString(" yyyyMMddHHmmss_ffff", DateTimeFormatInfo.InvariantInfo) NewFileName = DateTime.Now.ToString("yyyyMMddHHmmss_ffff", DateTimeFormatInfo.InvariantInfo.ToLower());
22 //Obtener el archivo extensión
23InvariantInfo ) fileExt;
22 //Ruta de carga del archivo
23 String filePath = dirPath newFileName;
24 //Guardar file
25 imgFile.SaveAs(filePath);
26 //Salida del cliente
27 context.Response.Write("{{fileFileFileFileFileExt}})Response .Write("{success.true, ruta: '" strPath newFileName "'}");
28 }
29
30 public bool IsReusable
31 {
>
32 obtiene
33 {
34 devuelve falso;
35 }
36 }
37 }
38 }
Copiar código
2. El efecto es el siguiente:
Extjs sin tonterías
3 Explicación:
(1) El campo de carga no solo puede cargar imágenes, sino también otros archivos. . Aquí tomamos fotografías como ejemplo.
(2) En el desarrollo real, también necesitamos verificar el formato, tamaño, etc. de la imagen. Este ejemplo se centra en la carga y no agrega ninguna verificación.