Bootstrap-FileInput組件的簡單Demo

官網：

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