Easyui上傳文件的問題

首先，添加以下代碼到前端界面

<form id="fm" method="post" enctype="multipart/form-data" style="margin:0;padding:20px 50px">
    <div style="margin-bottom:20px;font-size:14px;border-bottom:1px solid #ccc">上傳文件</div>
    <div style="margin-bottom:10px">
        <input id='upfile' class="easyui-filebox" name="file1" multiple="true" data-options="prompt:'選擇文件',buttonText:'選擇文件'" style="width:300px"/>
        <a id="sub" href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="submit()" plain="true">上傳文件</a>
    </div>
</form>

需要注意的地方：easyui-filebox必須要加上name屬性，不加后台就沒法獲取。

千萬不要糾結於使用 $('#upfile').filebox('getValue') 獲取文件路徑反饋為 C:\fakepath\... 的問題，這個跟上傳文件真的沒有一點關系。

寫入對應的JS代碼

  function submit() {
            $('#fm').form('submit', {
                url: '/UploadDemo/UploadFiles',
                onSubmit: function () {
                    return $(this).form('validate');
                },
                success: function (result) {
                    var result = eval('(' + result + ')');
                    if (result.success) {
                        $.messager.show({   
                            title: '提示',
                            msg: '上傳成功'
                        });
                    } else {
                        $.messager.show({    
                            title: '錯誤',
                            msg: result.errorMsg
                        });
                    }
                }
            });
        }

控制器寫入上傳文件代碼

 [HttpPost]
        public ActionResult UploadFiles()
        {
            var success = false;
            var errorMsg = "";

            //獲取客戶端上傳的文件集合
            HttpFileCollection files = System.Web.HttpContext.Current.Request.Files;
            if (files.Count == 0)
            {
                errorMsg = "未獲取到任何文件";
                return Json(new { success = success, errorMsg = errorMsg });
            }
            try
            {
                //定義文件存放的目標路徑
                string targetDir = System.Web.HttpContext.Current.Server.MapPath("~/Content/Upload/touxiang");
                //獲取文件集合中的每一個文件
                for (int i = 0; i < files.Count; i++)
                {
                    HttpPostedFile file = files[i];
                    //組合成文件的完整路徑
                    string path = System.IO.Path.Combine(targetDir, System.IO.Path.GetFileName(file.FileName));
                    //保存上傳的文件到指定路徑中
                    file.SaveAs(path);
                }
                success = true;
            }
            catch (System.Exception ex)
            {
                errorMsg = ex.ToString();
                return Json(new { success = success, errorMsg = errorMsg });
            }
            return Json(new { success = success, errorMsg = errorMsg });
        }

搞定~

 

附：如果要限制上傳文件類型，直接在data-option中設置accept屬性即可,如

<input class="easyui-filebox" data-options="accept: 'image/*'"/>

image/*中*為通配符，對應清單如下

類型	accept對應值	描述
*.3gpp	audio/3gpp, video/3gpp	3GPP Audio/Video
*.ac3	audio/ac3	AC3 Audio
*.asf	allpication/vnd.ms-asf	Advanced Streaming Format
*.au	audio/basic	AU Audio
*.css	text/css	Cascading Style Sheets
*.csv	text/csv	Comma Separated Values
*.doc	application/msword	MS Word Document
*.dot	application/msword	MS Word Template
*.dtd	application/xml-dtd	Document Type Definition
*.dwg	image/vnd.dwg	AutoCAD Drawing Database
*.dxf	image/vnd.dxf	AutoCAD Drawing Interchange Format
*.gif	image/gif	Graphic Interchange Format
*.htm	text/html	HyperText Markup Language
*.html	text/html	HyperText Markup Language
*.jp2	image/jp2	JPEG-2000
*.jpe	image/jpeg	JPEG
*.jpeg	image/jpeg	JPEG
*.jpg	image/jpeg	JPEG
*.js	text/javascript, application/javascript	JavaScript
*.json	application/json	JavaScript Object Notation
*.mp2	audio/mpeg, video/mpeg	MPEG Audio/Video Stream, Layer II
*.mp3	audio/mpeg	MPEG Audio Stream, Layer III
*.mp4	audio/mp4, video/mp4	MPEG-4 Audio/Video
*.mpeg	video/mpeg	MPEG Video Stream, Layer II
*.mpg	video/mpeg	MPEG Video Stream, Layer II
*.mpp	application/vnd.ms-project	MS Project Project
*.ogg	application/ogg, audio/ogg	Ogg Vorbis
*.pdf	application/pdf	Portable Document Format
*.png	image/png	Portable Network Graphics
*.pot	application/vnd.ms-powerpoint	MS PowerPoint Template
*.pps	application/vnd.ms-powerpoint	MS PowerPoint Slideshow
*.ppt	application/vnd.ms-powerpoint	MS PowerPoint Presentation
*.rtf	application/rtf, text/rtf	Rich Text Format
*.svf	image/vnd.svf	Simple Vector Format
*.tif	image/tiff	Tagged Image Format File
*.tiff	image/tiff	Tagged Image Format File
*.txt	text/plain	Plain Text
*.wdb	application/vnd.ms-works	MS Works Database
*.wps	application/vnd.ms-works	Works Text Document
*.xhtml	application/xhtml+xml	Extensible HyperText Markup Language
*.xlc	application/vnd.ms-excel	MS Excel Chart
*.xlm	application/vnd.ms-excel	MS Excel Macro
*.xls	application/vnd.ms-excel	MS Excel Spreadsheet
*.xlt	application/vnd.ms-excel	MS Excel Template
*.xlw	application/vnd.ms-excel	MS Excel Workspace
*.xml	text/xml, application/xml	Extensible Markup Language
*.zip	aplication/zip	Compressed Archive