bootstrap-fileinput使用

为什么要使用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

顶

Top

关注