无废话ExtJs 入门教程十三[上传图片：File]
extjs技术交流，欢迎加群（338456177）：
1.代码如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <!--ExtJs框架开始--> 6 <script type="text/javascript" src="/Ext/adapter/ext/ext-base.js"></script> 7 <script type="text/javascript" src="/Ext/ext-all.js"></script> 8 <script src="/Ext/src/locale/ext-lang-zh_CN.js" type="text/javascript"></script> 9 <link rel="stylesheet" type="text/css" href="/Ext/resources/css/ext-all.css" /> 10 <!--ExtJs框架结束--> 11 <script type="text/javascript"> 12 Ext.onReady(function () { 13 //初始化标签中的Ext:Qtip属性。 14 Ext.QuickTips.init(); 15 Ext.form.Field.prototype.msgTarget = 'side'; 16 //创建div组件 17 var imagebox = new Ext.BoxComponent({ 18 autoEl: { 19 style: 'width:150px;height:150px;margin:0px auto;border:1px solid #ccc; text-align:center;padding-top:20px;margin-bottom:10px', 20 tag: 'div', 21 id: 'imageshow', 22 html: '暂无图片' 23 } 24 }); 25 //创建文本上传域 26 var file = new Ext.form.TextField({ 27 name: 'imgFile', 28 fieldLabel: '文件上传', 29 inputType: 'file', 30 allowBlank: false, 31 blankText: '请浏览图片' 32 }); 33 //提交按钮处理方法 34 var btnsubmitclick = function () { 35 if (form.getForm().isValid()) { 36 form.getForm().submit({ 37 waitTitle: "请稍候", 38 waitMsg: '正在上传...', 39 success: function (form, action) { 40 Ext.MessageBox.alert("提示", "上传成功！"); 41 document.getElementById('imageshow').innerHTML = '<img style="width:150px;height:150px" src="' + action.result.path + '"/>'; 42 }, 43 failure: function () { 44 Ext.MessageBox.alert("提示", "上传失败！"); 45 } 46 }); 47 } 48 } 49 //重置按钮"点击时"处理方法 50 var btnresetclick = function () { 51 form.getForm().reset(); 52 } 53 //表单 54 var form = new Ext.form.FormPanel({ 55 frame: true, 56 fileUpload: true, 57 url: '/App_Ashx/Demo/Upload.ashx', 58 title: '表单标题', 59 style: 'margin:10px', 60 items: [imagebox, file], 61 buttons: [{ 62 text: '保存', 63 handler: btnsubmitclick 64 }, { 65 text: '重置', 66 handler: btnresetclick 67 }] 68 }); 69 //窗体 70 var win = new Ext.Window({ 71 title: '窗口', 72 width: 476, 73 height: 374, 74 resizable: true, 75 modal: true, 76 closable: true, 77 maximizable: true, 78 minimizable: true, 79 buttonAlign: 'center', 80 items: form 81 }); 82 win.show(); 83 }); 84 </script> 85 </head> 86 <body> 87 <!-- 88 说明： 89 (1)var imagebox = new Ext.BoxComponent():创建一个新的html标记。 90 官方解释如下： 91 This may then be added to a Container as a child item. 92 To create a BoxComponent based around a HTML element to be created at render time, use the autoEl config option which takes the form of a DomHelper specification: 93 (2) autoEl: {style: '',tag: 'div',id: 'imageshow', html: '暂无图片'}定义这个html标记的属性，如 标记为：div，id是多少等。 94 官方实例为： 95 var myImage = new Ext.BoxComponent({ 96 autoEl: { 97 tag: 'img', 98 src: '/images/my-image.jpg' 99 } 100 }); 101 (3)var file = new Ext.form.TextField()：创建一个新的文件上传域。 102 (4)name: 'imgFile':名称，重要，因为service端要根据这个名称接收图片。 103 (5)inputType: 'file'：表单类型为文件类型。 104 (6)waitTitle: "请稍候",waitMsg: '正在上传...',：上传等待过程中的提示信息。 105 (7)document.getElementById('imageshow').innerHTML = '<img style="width:150px;height:150px" src="' + action.result.path + '"/>';这个是原生态的js，把imageshow的值换成图片。 106 --> 107 </body> 108 </html>
其中与service交互用上传图片的 一般处理程序文件，源码如下：
/App_Ashx/Demo/Upload.ashx
1 using System; 2 using System.Web; 3 using System.IO; 4 using System.Globalization; 5 6 namespace HZYT.ExtJs.WebSite.App_Ashx.Demo 7 { 8 public class Upload : IHttpHandler 9 { 10 public void ProcessRequest(HttpContext context) 11 { 12 //虚拟目录，建议写在配置文件中 13 String strPath = "/Upload/Image/"; 14 //文件本地目录 15 String dirPath = context.Server.MapPath(strPath); 16 //接收文件 17 HttpPostedFile imgFile = context.Request.Files["imgFile"]; 18 //取出文件扩展名 19 String fileExt = Path.GetExtension(imgFile.FileName).ToLower(); 20 //重新命名文件 21 String newFileName = DateTime.Now.ToString("yyyyMMddHHmmss_ffff", DateTimeFormatInfo.InvariantInfo) + fileExt; 22 //文件上传路径 23 String filePath = dirPath + newFileName; 24 //保存文件 25 imgFile.SaveAs(filePath); 26 //客户端输出 27 context.Response.Write("{success:true,path:'" + strPath + newFileName + "'}"); 28 } 29 30 public bool IsReusable 31 { 32 get 33 { 34 return false; 35 } 36 } 37 } 38 }
2.效果如下：
![无废话ExtJs 入门教程十三[上传图片：File]_第1张图片](http://img.e-com-net.com/image/product/606f93ac6c874ed4beaf976041d46788.jpg "无废话extjs")
3.说明：
(1)上传域不光可以上传图片，还要以上传其他文件。这里我们以图片为例。
(2)在实际开发中，我们还要对图片格式，大小等进行校验，这个示例测重于上传，没有加入任何校验。