前端

1.要引用的js

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

bootstrap圖片上傳控件 fileinput