ajaxFileUpload簡介

ajaxFileUpload插件是一個(gè)非常簡單的基于Jquery的異步上傳文件的插件，使用過程中發(fā)現(xiàn)很多與這個(gè)同名的，基于原始版本基礎(chǔ)之上修改過的插件，文件版本比較多。

整個(gè)插件源碼不到200行，實(shí)現(xiàn)非常簡單，大致原理就是通過js動態(tài)創(chuàng)建隱藏的表單，然后進(jìn)行提交操作，達(dá)到附件上傳的目的，主要實(shí)現(xiàn)在源碼里都有注釋，不難理解，我們也可以基于此簡單版本實(shí)現(xiàn)更復(fù)雜的操作。

ajaxFileUpload使用說明

ajaxFileUpload的使用也很簡單，調(diào)用ajaxFileUpload方法即可，各配置項(xiàng)詳細(xì)說明如下：

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

首先在頁面添加對JQuery及ajaxFileUpload的引用，這里的JQuery用的2.1.4版本，經(jīng)測試用各個(gè)版本基本沒什么影響。

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

頁面添加類型為file的input標(biāo)簽

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

通過accept可以限定打開文件選擇對話框后，默認(rèn)能選擇的文件類型。文件類型的定義主要有以下這些

*.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

這里沒有單獨(dú)放上傳按鈕，添加了onchange事件，在選擇文件后立即上傳文件，onchange時(shí)間定義如下。

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

后臺控制器處理方法如下，使用MD5處理，判斷文件是否已經(jīng)存在，避免文件重復(fù)上傳。

/// <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();
            /*計(jì)算指定Stream對象的哈希值*/
            byte[] arrbytHashValue = md5Hasher.ComputeHash(files[0].InputStream);
            /*由以連字符分隔的十六進(jìn)制對構(gòu)成的String，其中每一對表示value中對應(yīng)的元素；例如“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);
            //創(chuàng)建文件夾，保存文件
              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";
        }

ajaxFileUpload使用過程中的一些問題

2.0 jQuery.handleError is not a function

解決方法：

經(jīng)測試handlerError只在jquery-1.4.2之前的版本中存在，以后版本中都沒有這個(gè)函數(shù)了，因此在將handleError這個(gè)函數(shù)復(fù)制到ajaxFileUpload.js中，就行了

   uploadHttpData: function (r, type) {
        var data = !type;
        data = type == "xml" || data ? r.responseXML : r.responseText;
        // If the type is "script", eval it in global context
        if (type == "script")
            jQuery.globalEval(data);
        // Get the JavaScript object, if JSON is used.
        if (type == "json")
            eval("data = " + data);
            //eval("data = \"" + data + "\"");
        // evaluate scripts within html
        if (type == "html")
            jQuery("<div>").html(data).evalScripts();
        return data;
    },
    handleError: function (s, xhr, status, e) {
        // If a local callback was specified, fire it
        if (s.error) {
            s.error.call(s.context || s, xhr, status, e);
        }
        // Fire the global callback
        if (s.global) {
            (s.context ? jQuery(s.context) : jQuery.event).trigger("ajaxError", [xhr, s, e]);
        }
    }

通過上述介紹，相信大家對jQuery文件上傳插件已經(jīng)有所了解，大家如果想了解更多相關(guān)知識，可以關(guān)注一下動力節(jié)點(diǎn)的jQuery視頻教程，里面的課程內(nèi)容由淺到深，通俗易懂，適合沒有基礎(chǔ)的朋友學(xué)習(xí)，希望對大家能夠有所幫助哦。