1. 程式人生 > >extjs列表中檔案上傳與下載(帶有重新命名操作)

extjs列表中檔案上傳與下載(帶有重新命名操作)

下面是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 = "上傳資料出錯!" } });
            }
        }