C# MVC ajaxFileUpload 導入Excel文件以及遇到的問題

0 ajaxFileUpload簡介

ajaxFileUpload插件是一個很是簡單的基於Jquery的異步上傳文件的插件，使用過程當中發現不少與這個同名的，基於原始版本基礎之上修改過的插件，文件版本比較多，我把我本身使用的ajaxFileUpload文件上傳到博客園上了，想要使用的朋友能夠下載：http://files.cnblogs.com/files/fonour/ajaxfileupload.js。

整個插件源碼不到200行，實現很是簡單，大體原理就是經過js動態建立隱藏的表單，而後進行提交操做，達到附件上傳的目的，主要實如今源碼裏都有註釋，不難理解，咱們也能夠基於此簡單版本實現更復雜的操做。

1 ajaxFileUpload使用說明

ajaxFileUpload的使用也很簡單，調用ajaxFileUpload方法便可，各配置項詳細說明以下：

$.ajaxFileUpload({
          type: "post",                          //請求類型：post或get,當要使用data提交自定義參數時必定要設置爲post url: "/Shared/Upload", //文件上傳的服務器端請求地址 secureuri: false, //是否啓用安全提交，通常默認爲false就行，不用特殊處理 fileElementId: "filePicture", //文件上傳控件的id <input type="file" id="filePicture" name="filePicture" accept=".jpg,.jpeg,.png,.bmp" onchange="filePictureChange()" /> dataType: "json", //返回值類型，通常設置爲json，還支持html\xml\script類型 data: { "id": "1", "name": "test" }, //用於post請求提交自定義參數 success: function (data, status) { //服務器成功響應處理函數  }, error: function (data, status, e) { //服務器響應失敗處理函數  } });

首先在頁面添加對JQuery及ajaxFileUpload的引用，這裏的JQuery用的2.1.4版本，經測試用各個版本基本沒什麼影響。

<script src="../../Content/js/jquery-2.1.4.min.js"></script>
<script src="../../Content/js/ajaxfileupload.js"></script>

頁面添加類型爲file的input標籤

首先在頁面添加對JQuery及ajaxFileUpload的引用，這裏的JQuery用的2.1.4版本，經測試用各個版本基本沒什麼影響。

<script src="../../Content/js/jquery-2.1.4.min.js"></script>
<script src="../../Content/js/ajaxfileupload.js"></script>

頁面添加類型爲file的input標籤

<input type="file" id="filePicture" name="filePicture" accept=".jpg,.jpeg,.png,.bmp" onchange="filePictureChange()" />

經過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

我這裏沒有單獨放上傳按鈕，添加了onchange事件，在選擇文件後當即上傳文件，onchange時間定義以下。

function filePictureChange() { $.ajaxFileUpload({ url: "/Shared/Upload", //用於文件上傳的服務器端請求地址 type: "post", secureuri: false, //通常設置爲false fileElementId: "filePicture", //文件上傳空間的id屬性 dataType: "json", //返回值類型 通常設置爲json success: function (data, status) { //服務器成功響應處理函數  alert(data.fileName); alert(data.filePath); alert(data.fileSize); }, error: function (data, status, e){ //服務器響應失敗處理函數  alert(e); } }); };

後臺控制器處理方法以下，使用MD5處理，判斷文件是否已經存在，避免文件重複上傳。

/// <summary> /// 附件上傳 /// </summary> /// <returns></returns> public ActionResult Upload() { HttpFileCollection files = System.Web.HttpContext.Current.Request.Files; if (files.Count == 0) return Json("Faild", JsonRequestBehavior.AllowGet); MD5 md5Hasher = new MD5CryptoServiceProvider(); /*計算指定Stream對象的哈希值*/ byte[] arrbytHashValue = md5Hasher.ComputeHash(files[0].InputStream); /*由以連字符分隔的十六進制對構成的String，其中每一對錶示value中對應的元素；例如「F-2C-4A」*/ string strHashData = System.BitConverter.ToString(arrbytHashValue).Replace("-", ""); string FileEextension = Path.GetExtension(files[0].FileName); string uploadDate = DateTime.Now.ToString("yyyyMMdd"); string virtualPath = string.Format("/Data/ComponentAttachments/{0}/{1}{2}", uploadDate, strHashData, FileEextension); string fullFileName = Server.MapPath(virtualPath); //建立文件夾，保存文件 string path = Path.GetDirectoryName(fullFileName); Directory.CreateDirectory(path); if (!System.IO.File.Exists(fullFileName)) { files[0].SaveAs(fullFileName); } string fileName = files[0].FileName.Substring(files[0].FileName.LastIndexOf("\\") + 1, files[0].FileName.Length - files[0].FileName.LastIndexOf("\\") - 1); string fileSize = GetFileSize(files[0].ContentLength); return Json(new { FileName = fileName, FilePath = virtualPath, FileSize = fileSize }, "text/html", JsonRequestBehavior.AllowGet); } /// <summary> /// 獲取文件大小 /// </summary> /// <param name="bytes"></param> /// <returns></returns> private string GetFileSize(long bytes) { long kblength = 1024; long mbLength = 1024 * 1024; if (bytes < kblength) return bytes.ToString() + "B"; if (bytes < mbLength) return decimal.Round(decimal.Divide(bytes, kblength), 2).ToString() + "KB"; else return decimal.Round(decimal.Divide(bytes, mbLength), 2).ToString() + "MB"; }

2 ajaxFileUpload使用過程當中的一些問題

IE瀏覽器彈下載框問題解決方法：

 

前臺：datatype:"text/html", success成功後 data = JSON.parse(data);進行轉換

 

後臺：控制器返回 return Json(new { data = data, success = true }, "text/html", JsonRequestBehavior.AllowGet);