朋友炒股兩個月賺了10萬，我幫他推廣一下公眾號，把錢用來投資總比放銀行連通貨膨脹都跑不過里強， 硬核離職，在家炒股 ，這是他每天的日志，有些經驗是花錢也買不到的。
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.效果如下：
3.說明：
(1)上傳域不光可以上傳圖片，還要以上傳其他文件。這里我們以圖片為例。
(2)在實際開發中，我們還要對圖片格式，大小等進行校驗，這個示例測重於上傳，沒有加入任何校驗。