首页 > 代码库 > Bootstrap-FileInput组件的简单Demo

Bootstrap-FileInput组件的简单Demo

2024-08-17 19:24:13   215人阅读

官网：
https://github.com/kartik-v/bootstrap-fileinput/
http://plugins.krajee.com/file-input
 
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


联系
我们