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

bootstrap组件几个常用的好用bs组件

简单的java开源图床

详解bootstrap-fileinput文件上传控件的亲身实践

有用过bootstrap-fileinput的吗

bootstrap-fileinput(二:编辑(修改)界面文件的上传,回显,删除(数据库同时删除)的操作 )