extjs列表中文件上传与下载（带有重命名操作）

转载地址：https://www.cnblogs.com/xiaoqi123/p/8081915.html

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 = "上传数据出错！" } });
            }
        }