Bootstrap FileInput插件上传图片和文件

步骤：

1、引入所需的css文件和js文件（可以从https://github.com/kartik-v/bootstrap-fileinput下载相关的js文件）

<link href="~/js/plugins/bootstrap_fileInput/css/fileinput.css" rel="stylesheet" />
<script src="~/js/plugins/bootstrap_fileInput/fileinput.js"></script>
<script src="~/js/plugins/bootstrap_fileInput/locales/zh.js"></script>

2、HTML：

 <form enctype="multipart/form-data">
     <input id="file-file" class="file" type="file" multiple>
 </form>
//multiple表示支持多个上传

3、JS：

function initFileInput(ctrlName, uploadUrl) {
            var control = $('#' + ctrlName);
            control.fileinput({
                resizeImage: true,
                resizePreference: 'width',
                language: 'zh', //设置语言
                uploadUrl: uploadUrl,//上传地址
                uploadAsync: true,
                allowedFileExtensions: ['jpg', 'png', 'gif'], //接收的文件后缀
                showUpload: true, //是否显示上传按钮
                showCaption: true, //是否显示标题
                browseClass: "btn btn-primary", //按钮样式
                previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
                maxFileCount: 10,//上传的最多文件数为10
                msgFilesTooMany: "选择图片超过了最大数量"
            });
        };

        //初始化控件initFileInput(id,uploadurl)控件id，与上传路径

        initFileInput("file-file", "/Site/UpLoadImage");

  //处理上传的返回结果
  $("#file-file").on("fileuploaded",
            function(event, data) {
                if (data.response) {
                   // 根据上传的返回值，按需处理
                }
            });

4、后台上传代码（C#）：

        /// <summary>
        /// 上传图片
        /// </summary>
        /// <returns></returns>

        public JsonResult UpLoadImage()
        {
            var files = Request.Files;
            if (files != null && files.Count > 0)
            {
                try
                {
                    var file = files[0];
                    if (file?.ContentLength > 0 && file.ContentType.Contains("image/"))
                    {
                        var strPath = @"~/SysFiles/Images/" + DateTime.Now.ToString("yyyyMMdd") + "/";
                        //本地调试过程中，以下代码需注释，
                        //if (!Directory.Exists(strPath))
                        //{
                        //    //需要注意的是，需要对这个物理路径有足够的权限，否则会报错 
                        //    Directory.CreateDirectory(strPath);
                        //}

                        var thisFileName = file.FileName;
                        var thisFilePath = Server.MapPath(strPath) + thisFileName;
                        file.SaveAs(thisFilePath);//此处保存成功，则视为上传成功
                        return Json("UpLoadOk");
                    }
                    return Json("UpLoadError");
                }
                catch (Exception e)
                {
                    return Json(ex.Message);
                }
            }
            return Json("NoFILE");
        }

5、总结：

• 实际操作中图片上传成功后会报错，前台js没有处理上传以后的操作，忽略了下面的部分

   $("#file-file").on("fileuploaded",
       function(event, data) {
           if (data.response) {
               //按需书写
           }
    });

• 需注意该插件要求返回的值是json类型的，如果后台返回的结果是string或者无返回值类型，该插件会报错，谨记。

参考网站：

官网：http://plugins.krajee.com/file-input#event-manipulation

Github： https://github.com/kartik-v/bootstrap-fileinput

Jquery插件库：http://www.jq22.com/jquery-info5231