文件上傳控件bootstrap-fileinput的使用

1.插件下載地址：https://github.com/kartik-v/bootstrap-fileinput

2.插件的引用

　　需要引用jquery

　　需要結合bootstrap使用，即頁面需要引入bootstrap相關js和css文件

　　引用fileinput.js 和css

　　中文需要引用js/locales/zh.js

　　需要主題樣式時引用themes下相關文件夾中的js和css

　　tips：最好以上按順序引用，免得出現莫名其妙的問題，比如zh.js必須在fileinput.js后引用否則無效

3.插件的代碼部分

<form id="frmUpload" method="post" enctype="multipart/form-data">
    <input id="input-id" type="file"  class="file-loading" accept="image/*,.pdf,.xls,.xlsx,.docx,.doc" />
</form>

 

js代碼初始化

$("#input-id").fileinput({
    theme: 'zh',
    uploadUrl: _uploadUrl, // 上傳的地址
    language: 'zh', //設置語言
    showCaption: false, //是否顯示標題
    uploadClass: "btn btn-default rightBtn",
    //showUpload: _showUp,//是否顯示上傳按鈕
    showRemove: false, //是否顯示刪除按鈕
    showPreview: true, //是否顯示文件的預覽圖
    overwriteInitial: false, //不覆蓋已存在的圖片
    initialPreviewShowDelete: true,
    showClose: true, //是否顯示刪除按鈕
    autoReplace: true, //再次選擇,覆蓋之前圖片內容
    //minImageWidth: 400, //圖片的最小寬度
    //minImageHeight: 400,//圖片的最小高度
    //maxImageWidth: 800,//圖片的最大寬度
    //maxImageHeight: 800,//圖片的最大高度
    previewSettings: {//預覽圖片大小設置
        image: { width: "5000px", height: "500px" }
    },
    browseClass: "btn btn-primary rightBtn", //按鈕樣式
    maxFileCount: 2,//允許最大上傳文件的數量
    minFileCount: 0,//允許最大上傳文件的數量
    allowedFileExtensions: "image/*,.pdf,.xls,.xlsx,.docx,.doc", //接收的文件后綴
    uploadAsync: false,//上傳異步
    uploadExtraData: function () {
        return {
            paraA: vaule
        }; //上傳時額外附加參數

    },
    initialPreviewAsData: true, // identify if you are sending preview data only and not the raw markup
    initialPreviewFileType: 'image', //初始化時預覽文件類型
    initialPreview: _initialPreview,//初始化時顯示已有數據
    initialPreviewDownloadUrl: _initialPreviewDownloadUrl, // 初始化預覽下載地址
    initialPreviewConfig: {
        caption: '555', // 展示的文件名
        width: '120px',
        style: 'max-width:100%;max-height:100%;',
        downloadurl: "", // 下載url
        key: "id", // 刪除是Ajax向后台傳遞的參數,
        type: 'image' // 預覽文件類型
    },//初始化時config
    fileActionSettings: {
        removeClass: 'hideBtn',
        downloadClass: 'hideBtn',
        uploadClass: 'hideBtn',
        zoomClass: 'hideBtn'
    },
    deleteUrl: _deleteUrl,//刪除地址
    maxFileSize: "10240",//最大容量
    msgSizeTooLarge: "文件 '{name}' (<b>{size} KB</b>) 超過了允許大小 <b>{maxSize} KB</b>.",
    initialCaption: "The photo"
}).on("filebatchuploadsuccess",
      function (event, d) { //上傳成功后回調函數
          var form = d.form,
              files = d.files,
              extra = d.extra,
              response = d.response,
              reader = d.reader;
      })
.on('filedeleted', function (event, key) {
    if (event.handleObj.handler.arguments[2].responseJSON.success) {

    } else {
        wxc.xcConfirm("刪除失敗！", wxc.xcConfirm.typeEnum.info);
    }
})
.on('filebatchselected', function (event, files) {
    var _maxRequestSize = 10240;
    _allFileSize = 0;
    $.each(files, function (idx, item) {
        _allFileSize += (item.size / 1024);
    });
    _allFileSize = parseFloat(_allFileSize.toFixed(2));
    if (_allFileSize > _maxRequestSize) {
        var msg = "選擇的文件總大小（" + (_allFileSize / 1024).toFixed(2) + "MB）超出限制（" + (_maxRequestSize / 1024).toFixed(2) + "MB）";
        $('#input-id').fileinput('clear');
        alert(msg);
    }
})
.on('filebatchuploaderror', function (event, data, msg) {
    var _maxRequestSize = 10240;
    _allFileSize = 0;
    if (_allFileSize > _maxRequestSize) {
        msg = "上傳文件總大小（" + (_allFileSize / 1024).toFixed(2) + "MB）超出限制（" + (_maxRequestSize / 1024).toFixed(2) + "MB）";
        $('#input-id').fileinput('clear');
        alert(msg);
    }
});

 

 

 

4.插件的部分屬性說明

　　1.multiple表示允許同時上傳多個文件，class=“file-loading”表示標簽的樣式。這里很重要，如果class="file"，則中文化不能生效。

　　2.accept 屬性只能與 <input type="file"> 配合使用。它規定能夠通過文件上傳進行提交的文件類型。這個屬性和插件allowedFileExtensions屬性看起來一樣但是插件的

　　allowedFileExtensions屬性只是你選擇了文件類型之后他會提示你禁止上傳,如圖

 

　　而accept 屬性則是在點擊選擇文件之后,文件框里只會出現你寫在accept 屬性的后綴名的文件.可以在一開始就避免用戶選擇錯誤的文件類型,當然如果直接拖進控件,那

也是沒有辦法,如圖:

　　這張是沒有加accept 屬性

 　　這張是加了accept="image/*,.pdf,.xls,.xlsx,.docx,.doc"的圖片

　　

　　3.部分要使用的方法

.on("filebatchuploadsuccess",
      function (event, d) { //上傳成功后回調函數
          var form = d.form,
              files = d.files,
              extra = d.extra,
              response = d.response,
              reader = d.reader;
      })
.on('filedeleted', function (event, key) {//刪除后回調函數
    if (event.handleObj.handler.arguments[2].responseJSON.success) {
　　　　alert("上傳成功!")
    } else {
        aler("刪除失敗！");
    }
})
.on('filebatchselected', function (event, files) {//批量選擇后回調函數
    var _maxRequestSize = 10240;
    _allFileSize = 0;
    $.each(files, function (idx, item) {
        _allFileSize += (item.size / 1024);
    });
    _allFileSize = parseFloat(_allFileSize.toFixed(2));
    if (_allFileSize > _maxRequestSize) {
        var msg = "選擇的文件總大小（" + (_allFileSize / 1024).toFixed(2) + "MB）超出限制（" + (_maxRequestSize / 1024).toFixed(2) + "MB）";
        $('#input-id').fileinput('clear');
        alert(msg);
    }
})
.on('filebatchuploaderror', function (event, data, msg) {//批量上傳失敗提示
    var _maxRequestSize = 10240;
    _allFileSize = 0;
    if (_allFileSize > _maxRequestSize) {
        msg = "上傳文件總大小（" + (_allFileSize / 1024).toFixed(2) + "MB）超出限制（" + (_maxRequestSize / 1024).toFixed(2) + "MB）";
        $('#input-id').fileinput('clear');
        alert(msg);
    }
});

 

 

　　4.有的想去除掉控件中的一些按鈕,如圖

 

　　showUpload,showRemove屬性是是否顯示紅色的部分的移除,上傳按鈕是否顯示.

　　而黑色部分按鈕的隱藏顯示則是由fileActionSettings這個屬性來決定的

　　具體的內容請看http://plugins.krajee.com/file-input/plugin-options#fileActionSettings

　　寫一個class內容為display:none;然后把這個class賦值給對應的屬性就ok了.如圖

　　　　

 

 　　效果如第三張圖,圖片右下角刪除按鈕已被禁用掉.

 5.Controller中的代碼

簡易版:

        [HttpPost]
        public ActionResult UploadImages()
        {
            var _files = Request.Files;//獲取上傳的文件
            var _paraA = Request["paraA"];//獲取上傳文件時附加的參數
            var _imgList = new List<string>();//用於存儲已上傳圖片,無刷新時顯示
            var _lstInitialPreview = new List<string>();//初始化
            var _lstInitialPreviewConfig = new List<dynamic>();//初始化配置

            //todo 可將文件存儲至指定位置,並將文件相關信息保存至數據庫
            
            /*此處需要遵循 bootstrap的 fileinput 格式回傳 */
            return Json(new
            {
                success = false,
                d = _imgList,
                initialPreview = _lstInitialPreview,
                initialPreviewConfig = _lstInitialPreviewConfig
            });

        }

 

 

 我的代碼，可能有不足之處

   private static readonly object m_locker = new object();

        /// <summary>
        /// 上傳圖片
        /// </summary>
        /// <returns></returns>
        [HttpPost]
        public ActionResult UploadImages()
        {
            var _files = Request.Files;//上傳的所有文件
            var _relatedType = Request["RelatedType"];//圖片關聯的表
            var _relatedId = int.Parse(Request["RelatedId"]);//圖片關聯表的Id
            var _imageType = (ImageUsageCodeEnum)int.Parse(Request["ImageType"]);//圖片的枚舉,用於上傳到指定地址后增加一個文件區分
            var _imgList = new List<string>();//用於存儲已上傳圖片,無刷新時顯示
            var _lstInitialPreview = new List<string>();//圖片預覽初始化
            var _lstInitialPreviewConfig = new List<dynamic>();//圖片預覽初始化配置
            var _imgUrl = $"{SiteHelper.RESOURCE_PATH}/images/";//圖片上傳到的地址,
            //我存儲的方式是 $"{_imgUrl}/{_imageType}/{_newFileName}"  上傳文件統一地址  +/images/ + 圖片類型  + 重新生成的唯一文件名稱
                                                               
            
            #region 創建目錄
            m_logger.Info("Config Image Path:{0}", SiteHelper.UploadPath);

            var _directory = $@"{SiteHelper.UploadPath}\images\{_imageType.ToString()}";

            m_logger.Info("Upload Image Path:{0}", _directory);

            //var _directory = "D:\\images";
            try
            {
                if (!Directory.Exists(_directory))
                {
                    lock (m_locker)
                    {
                        if (!Directory.Exists(_directory))
                        {
                            Directory.CreateDirectory(_directory);
                        }
                    }
                }

            }
            catch (Exception ex)
            {

                m_logger_err.Error("不能創建上傳文件的目錄：{0}, 詳細信息：{1}", _directory, ex.Message + " - " + ex.StackTrace.ToString());

                return Json(new ApiResponseMsg { err_msg = string.Format("不能創建上傳文件的目錄：{0}", _directory) }, JsonRequestBehavior.AllowGet);
            }
            #endregion


            #region 上傳文件 / 保存到數據庫
            var msg = "";
            //用於獲取文件后綴
            Func<string, string> getType = (ext) =>
            {
                ext = ext.Replace(".", "");
                if (Regex.IsMatch(ext, "(gif|png|jpe?g)$"))
                {
                    return "image";
                }
                else if (Regex.IsMatch(ext, "(htm|html)$"))
                {
                    return "html";
                }
                else if (Regex.IsMatch(ext, "(rtf|docx?|xlsx?|pptx?|pps|potx?|ods|odt|pages|ai|dxf|ttf|tiff?|wmf|e?ps)$"))
                {
                    return "office";
                }
                else if (Regex.IsMatch(ext, "(txt|md|csv|nfo|ini|json|php|js|css)$"))
                {
                    return "text";
                }
                else if (Regex.IsMatch(ext, "(og?|mp4|webm|mp?g|mov|3gp)$"))
                {
                    return "video";
                }
                else if (Regex.IsMatch(ext, "(og?|mp3|mp?g|wav)$"))
                {
                    return "audio";
                }
                else if (Regex.IsMatch(ext, "(swf)$"))
                {
                    return "flash";
                }
                else if (Regex.IsMatch(ext, "(pdf)$"))
                {
                    return "pdf";
                }

                return "audio";
            };
            //循環所有的文件
            for (int i = 0; i < _files.Count; i++)
            {
                if (_files[i].ContentLength > 0)
                {
                    var _fileName = _files[i].FileName;//文件名
                    var _extension = _fileName.Substring(_fileName.LastIndexOf('.'));//文件后綴

                    var _newFileName = Guid.NewGuid().ToString("N") + _extension;//為文件新命名一個guid名字,避免用戶上傳的的文件同名
                    _files[i].SaveAs(Path.Combine(_directory, _newFileName));//保存至指定地址
                    
                    #region 新圖片數據庫Add

                    Modeles.Image _image = new Modeles.Image
                    {
                        CreatedBy = UserId,
                        CreatedOn = DateTime.Now,
                        Name = _fileName,
                        ImageFileName = _newFileName,
                        ImageUsageCode = (int)_imageType,
                        ImageXrefList = new List<Models.ImageXref>
                        {
                            new Modeles.ImageXref
                            {
                                RelatedType = _relatedType,
                                RelatedId = _relatedId,
                                CreatedBy = UserId,
                                CreatedOn = DateTime.UtcNow
                            }
                        }
                    };
                    var _result = AddOrUpdate(_image, "Image/AddImage", false);
                    if (!_result.success)
                    {
                        m_logger.Error("request error: {0}, url: {1}, data: {2}", _result.err_msg, _reqUrl, JsonConvert.SerializeObject(_image));
                        msg = "系統忙，請稍后再試";

                        break;
                    }
                     //我的圖片展示的方式,可自定義
                    _imgList.Add($"{_imageType.ToString()}/{_newFileName}" + "|" + _fileName + "|" + _result.data);
                     //我存儲的方式是 $"{_imgUrl}/{_imageType}/{_newFileName}"  上傳文件統一地址  +  圖片類型  + 重新生成的唯一文件名稱
                    var _downLoadUrl = $"{_imgUrl}{_imageType.ToString()}/{_newFileName}";

                    _lstInitialPreview.Add(_downLoadUrl);//下載地址
                    _lstInitialPreviewConfig.Add(new
                    {
                        downloadurl = _downLoadUrl,//下載地址
                        key = _result.data,//圖片上傳時新增至數據庫對應記錄的Id
                        type = getType(_extension)//文件后綴
                    });

                    #endregion

                    m_logger.Info("UploadImage save to db successed!");
                }
            }

            #endregion

            if (msg != "")
            {
                return Json(new ApiResponseMsg
                {
                    err_msg = msg
                }, JsonRequestBehavior.AllowGet);
            }

            /*此處需要遵循 bootstrap的 fileinput 格式回傳 */
            return Json(new
            {
                success = false,
                d = _imgList,
                initialPreview = _lstInitialPreview,
                initialPreviewConfig = _lstInitialPreviewConfig
            });

        }

 

 ６．圖片轉換

using System;
using System.Collections.Generic;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Drawing.Imaging;
using System.IO;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Utilities.Helper
{
    /// <summary>
    /// image幫助類
    /// </summary>
    public static class ImageHelper
    {

        /// <summary>
        /// Convert Image to Byte[]
        /// </summary>
        /// <param name="image">圖形對象</param>
        /// <returns></returns>
        public static byte[] ImageToBytes(Image image)
        {
            ImageFormat format = image.RawFormat;
            using (MemoryStream ms = new MemoryStream())
            {
                if (format.Equals(ImageFormat.Jpeg))
                {
                    image.Save(ms, ImageFormat.Jpeg);
                }
                else if (format.Equals(ImageFormat.Png))
                {
                    image.Save(ms, ImageFormat.Png);
                }
                else if (format.Equals(ImageFormat.Bmp))
                {
                    image.Save(ms, ImageFormat.Bmp);
                }
                else if (format.Equals(ImageFormat.Gif))
                {
                    image.Save(ms, ImageFormat.Gif);
                }
                else if (format.Equals(ImageFormat.Icon))
                {
                    image.Save(ms, ImageFormat.Icon);
                }
                else
                {
                    image.Save(ms, ImageFormat.Jpeg);
                }
                byte[] buffer = new byte[ms.Length];
                //Image.Save()會改變MemoryStream的Position，需要重新Seek到Begin
                ms.Seek(0, SeekOrigin.Begin);
                ms.Read(buffer, 0, buffer.Length);
                return buffer;
            }
        }

        /// <summary>
        /// Convert Byte[] to Image
        /// </summary>
        /// <param name="buffer">字節數組</param>
        /// <returns></returns>
        public static Image BytesToImage(byte[] buffer)
        {
            MemoryStream ms = new MemoryStream(buffer);
            Image image = System.Drawing.Image.FromStream(ms);
            return image;
        }

        /// <summary>
        /// Convert Byte[] to a picture and Store it in file
        /// </summary>
        /// <param name="fileName"></param>
        /// <param name="buffer"></param>
        /// <returns></returns>
        public static string CreateImageFromBytes(string fileName, byte[] buffer)
        {
            string file = fileName;
            Image image = BytesToImage(buffer);
            ImageFormat format = image.RawFormat;
            if (format.Equals(ImageFormat.Jpeg))
            {
                file += ".jpeg";
            }
            else if (format.Equals(ImageFormat.Png))
            {
                file += ".png";
            }
            else if (format.Equals(ImageFormat.Bmp))
            {
                file += ".bmp";
            }
            else if (format.Equals(ImageFormat.Gif))
            {
                file += ".gif";
            }
            else if (format.Equals(ImageFormat.Icon))
            {
                file += ".icon";
            }
            else
            {
                file += ".jpg";
            }
            System.IO.FileInfo info = new System.IO.FileInfo(file);
            System.IO.Directory.CreateDirectory(info.Directory.FullName);
            File.WriteAllBytes(file, buffer);
            return file;
        }


        /// <summary>
        /// 壓縮圖片， 並保存釋放圖片
        /// </summary>
        /// <param name="img"></param>
        /// <param name="dFile"></param> 
        /// <param name="flag">壓縮質量(數字越小壓縮率越高) 1-100</param>  
        /// <returns></returns>
        public static bool ZipPic(Image img, string dFile, int flag)
        {
            ImageFormat tFormat = img.RawFormat;
            //以下代碼為保存圖片時，設置壓縮質量  
            EncoderParameters ep = new EncoderParameters();
            long[] qy = new long[1];
            qy[0] = flag;//設置壓縮的比例1-100  
            EncoderParameter eParam = new EncoderParameter(System.Drawing.Imaging.Encoder.Quality, qy);
            ep.Param[0] = eParam;
            try
            {
                ImageCodecInfo[] arrayICI = ImageCodecInfo.GetImageEncoders();
                ImageCodecInfo jpegICIinfo = null;
                for (int x = 0; x < arrayICI.Length; x++)
                {
                    if (arrayICI[x].FormatDescription.Equals("JPEG"))
                    {
                        jpegICIinfo = arrayICI[x];
                        break;
                    }
                }
                if (jpegICIinfo != null)
                {
                    img.Save(dFile, jpegICIinfo, ep);//dFile是壓縮后的新路徑  
                }
                else
                {
                    img.Save(dFile, tFormat);
                }
                return true;
            }
            catch
            {
                return false;
            }
            finally
            {
                img.Dispose();
            }
        }


        /// <summary>
        /// 按比例縮放圖片
        /// </summary>
        /// <param name="SourceImage">源圖片，自動釋放</param>
        /// <param name="TargetWidth"></param>
        /// <param name="TargetHeight"></param>
        /// <returns></returns>
        public static Image ZoomPicture(Image SourceImage, int TargetWidth, int TargetHeight)
        {
            int IntWidth; //新的圖片寬
            int IntHeight; //新的圖片高
            try
            {
                System.Drawing.Imaging.ImageFormat format = SourceImage.RawFormat;
                System.Drawing.Bitmap SaveImage = new System.Drawing.Bitmap(TargetWidth, TargetHeight);
                Graphics g = Graphics.FromImage(SaveImage);
                g.Clear(Color.White);


                if (SourceImage.Width > TargetWidth && SourceImage.Height <= TargetHeight)//寬度比目的圖片寬度大，長度比目的圖片長度小
                {
                    IntWidth = TargetWidth;
                    IntHeight = (IntWidth * SourceImage.Height) / SourceImage.Width;
                }
                else if (SourceImage.Width <= TargetWidth && SourceImage.Height > TargetHeight)//寬度比目的圖片寬度小，長度比目的圖片長度大
                {
                    IntHeight = TargetHeight;
                    IntWidth = (IntHeight * SourceImage.Width) / SourceImage.Height;
                }
                else if (SourceImage.Width <= TargetWidth && SourceImage.Height <= TargetHeight) //長寬比目的圖片長寬都小
                {
                    IntHeight = SourceImage.Width;
                    IntWidth = SourceImage.Height;
                }
                else//長寬比目的圖片的長寬都大
                {
                    IntWidth = TargetWidth;
                    IntHeight = (IntWidth * SourceImage.Height) / SourceImage.Width;
                    if (IntHeight > TargetHeight)//重新計算
                    {
                        IntHeight = TargetHeight;
                        IntWidth = (IntHeight * SourceImage.Width) / SourceImage.Height;
                    }
                }
               // g.DrawImage(SourceImage, (TargetWidth - IntWidth) / 2, (TargetHeight - IntHeight) / 2, IntWidth, IntHeight);
                g.DrawImage(SourceImage,0,0, TargetWidth, TargetHeight);
                SourceImage.Dispose();

                return SaveImage;
            }
            catch (Exception ex)
            {

            }

            return null;
        }

        
    }
    
}

 

 

此時就可已將byte形式的圖片轉化為圖片格式並保存值至指定位置

ImageHelper.BytesToImage(bytes).Save(_directory + "/" + _newFileName);