【開源】1句代碼搞定圖片批量上傳，無需什么代碼功底【無語言界限】

開源地址：https://github.com/dunitian/LoTUploader

WebUploader基礎上的封裝改善，一句代碼全部實現（樣式美化，實例JS優化（配置優化，樣式調整，名稱+大小顯示，錯誤處理等），后端代碼。。。。。）

 效果：（完整demo：https://github.com/dunitian/LoTUploader/tree/V1.0.1/Demo）

一句代碼：$.lotuploader('lot-uploader', '/Home/Upload'); //必填參數：ID，Server地址 （完整案例看Demo部分）

第一步：引入樣式

<link href="Scripts/lotUploader/lotuploader1.0.1.min.css" rel="stylesheet" />

第二步：自己定義一個DIV（id名任意）

<div id="lot-uploader"></div>

第三步：引入腳本

<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script src="Scripts/lotUploader/lotuploader1.0.1.min.js"></script>

代碼部分：

<script type="text/javascript">

$.lotuploader({
　　lotDocId: 'lot-uploader', //ID
　　lotUrl: '/Home/Upload', //服務器Post地址
});

</script>

單文件處理：

$.lotuploader({ lotDocId: 'lot-uploader', lotUrl: '服務器Post地址', oneFile: true, fileSize: 1024 * 1024 * 5, btnStr: '點我就上傳默認展圖', lotSuccessFunc: function (file,data) { //方法主體 }, lotErrorFunc: function (msg) { $('#lot-uploader').append('<div class="lot-temp" style="color:red">' + msg + '</div> '); setTimeout(function () { $('.lot-temp').remove(); }, 2000); } });

后端實例代碼：

/// <summary>
        /// 圖片上傳
        /// </summary>
        /// <returns></returns>
        public JsonResult Upload(HttpPostedFileBase file)
        {
            if (file == null) { return Json(new { status = false, msg = "圖片提交失敗" }); }
            if (file.ContentLength > 10485760) { return Json(new { status = false, msg = "文件10M以內" }); }
            string filterStr = ".gif,.jpg,.jpeg,.bmp,.png";
            string fileExt = Path.GetExtension(file.FileName).ToLower();
            if (!filterStr.Contains(fileExt)) { return Json(new { status = false, msg = "圖片格式不對" }); }
            //防止黑客惡意繞過，從根本上判斷下文件后綴
            if (!file.InputStream.CheckingExt())
            {
                //todo：一次危險記錄
                return Json(new { status = false, msg = "圖片格式不對" });
            }
            //todo: md5判斷一下文件是否已經上傳過,如果已經上傳直接返回 return Json(new { status = true, msg = sqlPath });

            string path = string.Format("{0}/{1}", "/lotFiles", DateTime.Now.ToString("yyyy-MM-dd"));
            string fileName = string.Format("{0}{1}", Guid.NewGuid().ToString("N"), fileExt);
            string sqlPath = string.Format("{0}/{1}", path, fileName);
            string dirPath = Request.MapPath(path);

            if (!Directory.Exists(dirPath)) { Directory.CreateDirectory(dirPath); }
            try
            {
                //todo：縮略圖
                file.SaveAs(Path.Combine(dirPath, fileName));
                //todo: 未來寫存數據庫的Code
            }
            catch { return Json(new { status = false, msg = "圖片保存失敗" }); }
            return Json(new { status = true, msg = sqlPath });
        }

/// <summary>
    /// 判斷擴展名是否是指定類型---默認是判斷圖片格式，符合返回true（沒有釋放stream，請手動：file.InputStream.Dispose();）
    /// eg：圖片+壓縮+文檔："7173", "255216", "6677", "13780", "8297", "55122", "8075", "208207"
    /// eg：img，"7173", "255216", "6677", "13780" //gif  //jpg  //bmp //png
    /// eg：file,"8297", "55122", "8075", "208207" //rar //7z //zip + 文檔系列
    /// </summary>
    /// <param name="stream">文件流</param>
    /// <param name="fileTypes">文件擴展名</param>
    /// <returns></returns>
    public static bool CheckingExt(this Stream stream, params string[] fileTypes)
    {
        if (fileTypes == null || fileTypes.Length == 0) { fileTypes = new string[] { "7173", "255216", "6677", "13780" }; }
        bool result = false;
        string fileclass = "";

        #region 讀取頭兩個字節
        var reader = new BinaryReader(stream);
        byte[] buff = new byte[2];
        try
        {
            reader.Read(buff, 0, 2);//讀取每個文件的頭兩個字節
            fileclass = buff[0].ToString() + buff[1].ToString();
        }
        catch (System.Exception ex) { stream.Dispose(); reader.Dispose(); return false; }
        #endregion

        #region 校驗
        for (int i = 0; i < fileTypes.Length; i++)
        {
            if (fileclass == fileTypes[i])
            {
                result = true;
                break;
            }
        }
        #endregion
        return result;
    }

 

注意點：

如果你項目並不使用font-awesome，那請吧.upload-state-done:after樣式修改一下，這樣成功后就很明了

案例沒有采用純Net語法，只是把服務端處理用Net處理了下。index.html部分通用

CDN地址：

https://cdn.rawgit.com/dunitian/LoTUploader/master/Dist/progress.png

https://cdn.rawgit.com/dunitian/LoTUploader/master/Dist/lotuploader.swf

https://cdn.rawgit.com/dunitian/LoTUploader/master/Dist/lotuploader.min.css

https://cdn.rawgit.com/dunitian/LoTUploader/master/Dist/lotuploader1.0.2.min.js