Red de conocimiento informático - Aprendizaje de programación - Cómo subir imágenes en extjs

Cómo subir imágenes en extjs

1. El código es el siguiente:

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.