欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

配置使用bootstrap-fileinput

程序员文章站 2022-05-13 21:53:36
bootstrap-fileinput文件如下: 1.在项目中引用这三个文件,这里我是使用了BundleConfig,和你根据路径访问效果是一样的 2.编写input元素

bootstrap-fileinput文件如下:

配置使用bootstrap-fileinput

1.在项目中引用这三个文件,这里我是使用了BundleConfig,和你根据路径访问效果是一样的

配置使用bootstrap-fileinput

2.编写input元素

 <input type="file" name="img" id="img" class="file-loading" multiple=""/>

例如我这里,

 <div class="form-group">
                    <div class="col-md-3">
                        <div class="label-wrapper">
                            @Html.LabelFor(model => model.ProductImgLink, new { @class = "control-label" })
                            <div class="ico-help">
                                <i class="fa fa-question-circle"></i>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-9">
                        @Html.HiddenFor(model => model.ProductImgLink)
                       <input type="file" name="img" id="img" class="file-loading" multiple=""/>
                        @Html.ValidationMessageFor(model => model.ProductImgLink)
                    </div>
                </div>

3.加载上传插件我封装成jquery插件,方便其他地方同一调用

jQuery.extend({
UploadImg: function ($control, $input, uploadUrl, customOption) {
        var option = {
            language: 'zh', //设置语言
            uploadUrl: uploadUrl, //上传的地址
            allowedFileExtensions: ['jpg', 'gif', 'png'], //接收的文件后缀
            showUpload: true, //是否显示上传按钮
            showCaption: false, //是否显示标题
            browseClass: "btn btn-primary", //按钮样式     
            dropZoneEnabled: false,
            //dropZoneEnabled: false,//是否显示拖拽区域
            //minImageWidth: 50, //图片的最小宽度
            //minImageHeight: 50,//图片的最小高度
            //maxImageWidth: 1000,//图片的最大宽度
            //maxImageHeight: 1000,//图片的最大高度
            maxFileSize: 0,//单位为kb,如果为0表示不限制文件大小
            minFileCount: 1,
            maxFileCount: 10, //表示允许同时上传的最大文件个数
            enctype: 'multipart/form-data',
            validateInitialCount: true,
            previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
            msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}!",
        };
        if (customOption != null && customOption != undefined) {
            $.extend(option, customOption);
        }
        //初始化上传控件的样式
        $control.fileinput(option);
        //上传前
        $control.on('filepreupload', function (event, data, previewId, index) {

        });
        //导入文件上传完成之后的事件
        $control.on("fileuploaded", function (event, data, previewId, index) {
            if (data.response.ResultType === 0) {
                $input.val(data.response.Message);
            }
            else {
                toastr.error(data.response.Message);
            }
        });
        //异步上传错误结果处理
        $control.on("fileerror", function (event, data, msg) {
            toastr.error("网络错误,请重新提交");
        });
        //同步上传成功结果处理
        $control.on('filebatchuploadsuccess', function (event, data, previewId, index) {
            if (data.response.ResultType === 0) {
                $input.val(data.response.Message);
            }
            else {
                toastr.error(data.response.Message);
            }
        });
        //同步上传错误结果处理
        $control.on('filebatchuploaderror', function (event, data, msg) {
            toastr.error("网络错误,请重新提交");
        });
        //移除按钮事件
        $control.on("filecleared", function (event, data, msg) {
            $input.val('');
        });
    }
});

3.加载插件方法 这里的#img元素是绑定上传插件的html元素,#ProductImgLink是在后台方法成功保存后返回文件的名称用于保存数据

   $.UploadImg($("#img"), $("#ProductImgLink"), actionUrl, null);

4.后台保存文件方法

/// <summary>
        /// 上传图片到管理系统的文件夹中
        /// </summary>
        /// <param name="name">文件夹名称</param>
        /// <returns></returns>
        [HttpPost]
        public ActionResult UploadFiles(string name)
        {
            var files = Request.Files;
            if (files != null && files.Count > 0)
            {
                StringBuilder fileNames=new StringBuilder();
                for (int i = 0; i < files.Count; i++)
                {
                    var file = files[i];
                    string fileName = DateTime.Now.ToString("yyyyMMddHHmmssffff") + file.FileName;
                    string path = Server.MapPath("~/Areas/Admin/Content/admin/adminImg" + name);
                    if (!Directory.Exists(path)) Directory.CreateDirectory(path);
                    string filePath = path + "/" + fileName;
                    file.SaveAs(filePath);
                    fileNames.AppendFormat(name+"/"+ fileName + ";");
                }
               
                fileNames = fileNames.Remove(fileNames.Length - 1, 1);
                return Json(new OperationResult(OperationResultType.Success, fileNames.ToString()));
            }
            return Json(new OperationResult(OperationResultType.Error, "上传失败"));
        }

我这里用了批量保存文件的方法,比如你在页面添加了多个图片,点击上传,会一次把这些图片全部传给后台,这个方法只适用于同步上传文件才有效果,所以你初始化插件的时候还需要设置(使用同步,多个图片只会调用一次后台方法,使用异步多个图片会多次调用后台方法)

  var option = {
            uploadAsync: false,
        };
$.UploadImg($("#img"), $("#ProductImgLink"), actionUrl, option);

拓展:在编辑的时候加载保存的图片,预览图片,使用参数 : initialPreview

  var imgArry = new Array();
 imgArry.push('<img  src="文件保存的路径" style="width:auto;height:auto;max-width:100%;max-height:100%;" class="file-preview-image kv-preview-data rotate-1"/>');
var option = { initialPreview: imgArry, };