extjs列表中檔案上傳與下載(帶有重新命名操作)
阿新 • • 發佈:2018-12-18
下面是extjs列表中檔案上傳與下載:
如圖:
一、上傳
上傳按鈕:
{ xtype: 'button', width: 60, margin: '0 20', text: ' 上 傳 ', handler: 'onUploadClick' }]
上傳按鈕事件(開啟上傳視窗和傳參):
onUploadClick: function () { var me = this, view = me.getView(), vm = view.getViewModel(), store = me.getStore('gridstore'), filType = view.up('window').FIL_TYPE,//附件型別(1:專案附件,2:需求附件,3需求明細附件) fileId = view.up('window').FILE_RELATION_ID;//附件關係ID(專案表ID,需求表ID,需求明細表ID) var userOper = Ext.create('MainApp.view.comm.UploadOperation.Operation'); Ext.create('Ext.window.Window', { title: '上傳檔案', resizable: false, constrain: true, modal: true, items: userOper, width: 400, height: 120, _up: this, FIL_TYPE: filType, FILE_RELATION_ID:fileId, listeners: { beforeclose: function () { store.reload(); } } }).show(); },
上傳視窗:
視窗程式碼主要看匯入按鈕事件
上傳後臺方法(重新使用guid命名,避免檔案重複被替換,原名稱需要儲存到資料庫):
/// <summary> /// 上傳檔案 /// </summary> /// <returns></returns> [HttpPost] public ActionResult UpLoadFile(string filType,string fileRelationId) { try { WFile wfile = new WFile(); HttpPostedFileBase file = Request.Files[0]; if (file == null) { return Json(new { success = false, message = "沒有選擇檔案!", errors = new { fileUpName = "上傳資料出錯!" } }); } //if (!file.FileName.Contains(".doc") && !file.FileName.Contains(".docx")) //{ // return Json(new { success = false, message = "檔案格式不正確,只能上傳Word檔案!", errors = new { fileUpName = "上傳資料出錯!" } }); //} string guId = Guid.NewGuid().ToString("N"); string extension = Path.GetExtension(file.FileName); var filePath = Path.Combine(Request.MapPath("~/Upload"), Path.GetFileName(guId + extension)); file.SaveAs(filePath); //資料庫操作 wfile.FIL_TYPE = filType; wfile.FILE_RELATION_ID = fileRelationId; wfile.FIL_NAME = file.FileName; wfile.FIL_PATH = guId + extension; _wfile.Add(wfile); return Json(new { success = true, fileName = file.FileName, rowNum = 1 }); } catch (System.Exception ex) { return Json(new { success = false, message = ex.Message, errors = new { fileUpName = "上傳資料出錯!" } }); } }
二、下載
下載按鈕:
columns: [ { dataIndex: 'NUMROW', text: '序號', width: 40 }, { dataIndex: 'FIL_NAME', text: '附件名稱', flex: 1 }, { dataIndex: 'FIL_PATH', header: '檔案路徑', align: 'center', flex: 1, hidden: true }, { dataIndex: 'USER_NAME', text: '建立人', flex: 1 }, { text: '上傳時間', dataIndex: 'CREATE_DATE', align: 'left', width: 125, flex: 1, renderer: Ext.util.Format.dateRenderer('Y-m-d') }, { text: '操作', xtype: 'actioncolumn', width: 80, flex: 1, items: [ { icon: '../images/redactBtn_down.PNG', handler: 'DownFile' }, ] } ],
下載按鈕事件:
DownFile: function (grid, rowIndex, colIndex, e, td, tr) { window.location.href = '/DataBase/DownFile?fileName=' + tr.get('FIL_NAME') + "&filePathName=" + tr.get('FIL_PATH'); }
下載後臺方法(需要用原附件名稱替換guid名稱完成下載):
/// <summary> /// 下載附件 /// </summary> /// <param name="fileName">原檔名稱</param> /// <param name="filePathName">附件地址名稱</param> /// <returns></returns> public ActionResult DownFile(string fileName, string filePathName) { try { var filePath = Path.Combine(Request.MapPath("~/Upload"), Path.GetFileName(filePathName)); FileStream fs = new FileStream(filePath, FileMode.Open); byte[] bytes = new byte[(int)fs.Length]; fs.Read(bytes, 0, bytes.Length); fs.Close(); System.Web.HttpContext.Current.Response.ContentType = "application/octet-stream"; //通知瀏覽器下載檔案而不是開啟 System.Web.HttpContext.Current.Response.AddHeader("Content-Disposition", "attachment; filename=" + fileName); System.Web.HttpContext.Current.Response.BinaryWrite(bytes); System.Web.HttpContext.Current.Response.Flush(); System.Web.HttpContext.Current.Response.End(); return Json(new { success = true, fileName = fileName, rowNum = 1 }); } catch (System.Exception ex) { return Json(new { success = false, message = ex.Message, errors = new { fileUpName = "上傳資料出錯!" } }); } }