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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了文件上传控件bootstrap-fileinput的使用，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含15211字，纯文字阅读大概需要22分钟。

内容图文

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);

内容总结

以上是互联网集市为您收集整理的文件上传控件bootstrap-fileinput的使用全部内容，希望文章能够帮你解决文件上传控件bootstrap-fileinput的使用所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端