配置使用bootstrap-fileinput
程序员文章站
2022-05-13 21:53:36
bootstrap-fileinput文件如下: 1.在项目中引用这三个文件,这里我是使用了BundleConfig,和你根据路径访问效果是一样的 2.编写input元素
bootstrap-fileinput文件如下:
1.在项目中引用这三个文件,这里我是使用了BundleConfig,和你根据路径访问效果是一样的
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, };
推荐阅读
-
jquery使用append(content)方法注意事项分享
-
Python使用sorted对字典的key或value排序
-
Centos搭建PHP5.3.8+Nginx1.0.9+Mysql5.5.17详细配置
-
Thinkphp的volist标签嵌套循环使用教程
-
#实践笔记#Ubuntu配置Apache+PHP+MySQL
-
webstorm中配置nodejs环境及npm的实例
-
Golang学习:sublime text3配置golang环境
-
cad三维拉伸怎么用? CAD使用三维拉伸命令的详细教程
-
使用Python的toolz库开始函数式编程的方法
-
Mac下Supervisor进程监控管理工具的安装与配置