文件上传控件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后引用否则无效

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

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代码初始化

文件上传控件bootstrap-fileinput的使用
$("#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);
    }
});
文件上传控件bootstrap-fileinput的使用

 

 

 

4.插件的部分属性说明

  1.multiple表示允许同时上传多个文件,class=“file-loading”表示标签的样式。这里很重要,如果class="file",则中文化不能生效。

  2.accept 属性只能与 <input type="file"> 配合使用。它规定能够通过文件上传进行提交的文件类型。这个属性和插件allowedFileExtensions属性看起来一样但是插件的

  allowedFileExtensions属性只是你选择了文件类型之后他会提示你禁止上传,如图

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

 

  而accept 属性则是在点击选择文件之后,文件框里只会出现你写在accept 属性的后缀名的文件.可以在一开始就避免用户选择错误的文件类型,当然如果直接拖进控件,那

也是没有办法,如图:

  这张是没有加accept 属性

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

   这张是加了accept="image/*,.pdf,.xls,.xlsx,.docx,.doc"的图片

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

  3.部分要使用的方法

文件上传控件bootstrap-fileinput的使用
.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);
    }
});
文件上传控件bootstrap-fileinput的使用

 

 

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

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

  showUpload,showRemove属性是是否显示红色的部分的移除,上传按钮是否显示.

  而黑色部分按钮的隐藏显示则是由fileActionSettings这个属性来决定的

  具体的内容请看http://plugins.krajee.com/file-input/plugin-options#fileActionSettings

  写一个class内容为display:none;然后把这个class赋值给对应的属性就ok了.如图

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

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

 

   效果如第三张图,图片右下角删除按钮已被禁用掉.

 5.Controller中的代码

简易版:

文件上传控件bootstrap-fileinput的使用
        [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
            });

        }
文件上传控件bootstrap-fileinput的使用

 

 

 我的代码,可能有不足之处

文件上传控件bootstrap-fileinput的使用
   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 }); }
文件上传控件bootstrap-fileinput的使用

 

 6.图片转换

文件上传控件bootstrap-fileinput的使用
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;
        }

        
    }
    
}
文件上传控件bootstrap-fileinput的使用

 

 

此时就可已将byte形式的图片转化为图片格式并保存值至指定位置

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

 

上一篇:Java基础----面向对象编程OOP之二


下一篇:Bootstrap FileInput(文件上传)中文API整理