Bootstrap-FileInput组件的简单Demo
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Bootstrap-FileInput组件的简单Demo相关的知识,希望对你有一定的参考价值。
官网:
html页面:
引用:
<link href="~/BootstrapComponent/css/fileinput.css" rel="stylesheet" /> <script src="~/BootstrapComponent/js/fileinput.js"></script> <script src="~/BootstrapComponent/js/locales/zh.js"></script>
<!--容器--> <input id="inputFile" type="file" class="file" data-preview-file-type="text" name="file"> <!--JS代码--> <script> //初始化fileinput控件 $("#inputFile").fileinput({ language: ‘zh‘, autoReplace: false, maxFileCount: 1, allowedFileExtensions: ["jpg", "png", "gif"], browseClass: "btn btn-primary", //按钮样式 previewFileIcon: "<i class=‘glyphicon glyphicon-king‘></i>" }); </script>
fileinput.js文件参数修改:
$.fn.fileinput.defaults = {
language: ‘en‘,
showCaption: true,
showBrowse: true,
showPreview: true,
showRemove: true,
showUpload: false, //若为同步提交,无需显示组件的上传按钮
showCancel: true,
showClose: true,
...
}
MVC控制器:
/// <summary> /// MVC文件上传后台方法 /// </summary> /// <returns></returns> public JsonResult FileUpload() { string text = "位置错误!"; bool isSuccess = false; var files = Request.Files; if (files != null && files.Count > 0) { try { var file = files[0]; var fileName = file.FileName; var filePath = Path.Combine(HttpRuntime.AppDomainAppPath, "image", fileName); //绝对路径 file.SaveAs(filePath); isSuccess = true; text = "上传成功!"; } catch (Exception e) { text = e.Message; } } return Json(new { Success = isSuccess, Message = text }, JsonRequestBehavior.AllowGet); }
以上是关于Bootstrap-FileInput组件的简单Demo的主要内容,如果未能解决你的问题,请参考以下文章
SpringSpring MVC文件上传--整合bootstrap-fileinput和jQuery-File-Upload