bootstrap圖片上傳控件 fileinput

前端

1.要引用的js  

fileinput.js      fileinput.css

<link type="text/css" rel="stylesheet" href="~/HContent/css/fileinput.css" />  //-----------樣式
<script src="~/HContent/js/fileinput.js"></script>　　　　　　　　　　　　　　　　　//基本的js
<script src="~/HContent/js/locales/zh.js"></script>　　　　　　　　　　　　　　　　 //中文js

2.html代碼

<div class="col-sm-10">
  <div class="file-loading">
     <input id="uploadFile" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="2">
  </div>
</div>

3.js代碼

        $('#uploadFile').fileinput({
            language: 'zh',　　　　　　　　//使用中文
            theme: 'fa',　　　　　　　　　　
            showUpload: false,　　　　　　//upload按鈕不顯示
            uploadUrl: '@Url.Action("ImageRecive", "BeadHouse")',   //服務器url調用路徑
            allowedFileExtensions: ['jpg', 'png', 'gif'],　　　　//允許的文件格式
            overwriteInitial: false,
            maxFileSize: 1000,　　　　　　　　　　　　　　　　　　　　//文件最大尺寸
            maxFilesNum: 3,　　　　　　　　　　　　　　　　　　　　　　//文件最大數量
            slugCallback: function (filename) {
                return filename.replace('(', '_').replace(']', '_');
            },
        });

js的消息響應處理

$("#uploadFile").on("fileuploaded", function (event, data, previewId, index) {
            var d = data.response;//接收后台返回的數據
            if (d.Code == 1) {
                var bToObj = JSON.parse(d.Record);
                
                if (bToObj[0] != null) {

                    var test = window.location.origin + window.location.pathname;
                    var imgid = bToObj[0];
      
                }
            }
            else {
                $.alert(d.Message);
            }
        });

4.C#后台處理

        
　　　　　　//圖片接收后保存
　　　　　public ActionResult ImageRecive()
        {
            string[] extName = { ".jpg", ".gif", ".jpeg", ".png", ".pdf" };
            var _directory = HttpContext.Server.MapPath("~/BHImage");
            List<string> filenames = new List<string>();
            HttpFileCollection upload = System.Web.HttpContext.Current.Request.Files;
            for (int i = 0; i < upload.Count; i++)
            {
                if (upload.Count > 3)
                {
                    return AjaxFail("限制上傳文件數量");
                }
                HttpPostedFileBase file = Request.Files[i];
                string ext = Path.GetExtension(file.FileName).ToLower();
                if (!extName.Contains(ext))
                {
                    return AjaxFail("請上傳jpg、gif、jpeg、png、pdf格式文件");
                };

                if (file.InputStream.Length > 1024000)
                {
                    return AjaxFail("上傳的文件不要超過1M");
                }
                var namefix = System.Guid.NewGuid().ToString() + "_" + System.DateTime.Now.ToString("HHmmss") + Path.GetExtension(file.FileName);
                string file_name = "/" + namefix;
                filenames.Add(namefix);
                file.SaveAs(_directory + file_name);
            }
            return AjaxSuccess(filenames.Count.ToString(), filenames);
        }

 5.C#幾個基礎函數

        /// <summary>
        /// ajax訪問，操作成功時返回json
        /// </summary>
        /// <param name="message">消息</param>
        /// <param name="data">數據</param>
        /// <returns></returns>
        protected JsonResult AjaxSuccess(string message, object data)
        {
            if (data is Object)
            {
                return Cgl_Json(1, message, data, true);
            }
            else
            {
                return Cgl_Json(1, message, data, false);
            }
        }
        /// <summary>
        /// ajax訪問時，返回json
        /// </summary>
        /// <param name="code">代碼 -1 ：未登錄，1：成功，0：失敗</param>
        /// <param name="message">消息</param>
        /// <param name="data">數據</param>
        /// <param name="isSerialize">是否序列化</param>
        /// <returns></returns>
        protected JsonResult Cgl_Json(int code, string message, object data, bool isSerialize)
        {
            var jj = new AjaxResult() { Code = code, Message = message, Record = data };

            if (isSerialize)
            {
                jj.Record = JsonConvert.SerializeObject(jj.Record, Formatting.Indented, new IsoDateTimeConverter() { DateTimeFormat = "yyyy-MM-dd" });
            }

            return new JsonResult() { JsonRequestBehavior = JsonRequestBehavior.AllowGet, Data = jj };
        }