bootstrap-fileinput使用

多吉發表於2017-02-17
原文網址 : https://flycode.co/archives/132698
boot

為什麼要使用bootstrap-fileinput，為了圖片上傳之前的預覽圖！

1.引入js,css

 1 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
 2     <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
 3     <link href="css/fileinput.min.css" rel="stylesheet" type="text/css" />
 4     <link href="css/theme.css" rel="stylesheet" type="text/css" />
 5     <script src="../../Scripts/bootstrap/js/jquery-3.1.0.min.js" type="text/javascript"></script>
 6     <script src="js/sortable.js" type="text/javascript"></script>
 7     <script src="js/fileinput.js" type="text/javascript"></script>
 8     <script src="js/zh.js" type="text/javascript"></script>
 9     <script src="js/theme.js" type="text/javascript"></script>
10     <script src="js/bootstrap.min.js" type="text/javascript"></script>

View Code

 

2.file的input標籤

<input id="file-0a" name="file-0a" class="file" type="file" multiple data-min-file-count="1" />

3.修改form表單，後臺獲得圖片相關資訊

<form id="form1" runat="server" method="post" enctype="multipart/form-data">

4.後臺程式碼，上傳圖片至伺服器

 1  #region 上傳模板預覽圖
 2 
 3                 string fileName = string.Empty;
 4                 System.Web.HttpFileCollection files = Request.Files;
 5                 for (int fileCount = 0; fileCount < files.Count; fileCount++)
 6                 {
 7                     System.Web.HttpPostedFile postedfile = files[fileCount];
 8                     fileName = System.IO.Path.GetFileName(postedfile.FileName);
 9                     if (!String.IsNullOrEmpty(fileName))
10                     {
11                         string fileExtenstion = System.IO.Path.GetExtension(fileName);//獲取檔案型別
12                         //上傳目錄
13                         string directory = Server.MapPath("/Upload/Template/");
14                         //檔案全路徑
15                         if (uid == 0)//新增
16                             fileName = T_COM_TemplateInfoBll.Instance.GetRecordNum() + fileExtenstion;
17                         else//編輯
18                             fileName = temp.TempPreview;
19 
20                         string path = directory + fileName;
21                         //判斷目錄是否存在
22                         if (!Directory.Exists(directory))
23                         {
24                             Directory.CreateDirectory(directory);
25                         }
26                         //檔案存在就刪除檔案
27                         if (File.Exists(path))
28                         {
29                             File.Delete(path);
30                         }
31                         //上傳到伺服器的路徑
32                         postedfile.SaveAs(path);
33                     }
34                 }
35                 #endregion

View Code

5.編輯時，預覽圖片

 1  //初始化影像資訊
 2         function initPortrait(ctrlName, id) {
 3             var control = $(`#` + ctrlName);
 4             var imageurl = `../../Upload/Template/<%=temp.TempPreview %>?r=` + Math.random();
 5 
 6             //重要，需要更新控制元件的附加引數內容，以及圖片初始化顯示
 7             control.fileinput(`refresh`, {
 8                 initialPreview: [//預覽圖片的設定
 9                     "<img src=`" + imageurl + "` class=`file-preview-image imgInit` alt=`` title=`imgPreview`>"],
10             });
11         }
12 
13 //縮圖和預覽圖樣式
14 //編輯預覽圖片大小
15             $("div table button[title=`檢視詳情`]").click(function () {
16                 var img_tag = $(".kv-zoom-body").find(`img`);
17                 img_tag.removeClass("imgInit").addClass("imgPreview");
18             });

View Code

css

1 .imgInit {
2             width:auto;height:160px;
3         }
4         .imgPreview {
5             width: auto; height: auto; max-width: 100%; max-height: 100%;
6         }

View Code

 

 


相關文章