JavaScript教程之配置使用bootstrap-fileinput

当前位置:

首页 > 网站开发 > JavaScript >

JavaScript教程之配置使用bootstrap-fileinput

bootstrap-fileinput文件如下：

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

2.编写input元素

例如我这里，

 <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,
        };

栏目列表