bootstrap-fileinput使用-白红宇

为什么要使用bootstrap-fileinput，为了图片上传之前的预览图！

1.引入js,css

1 
       2     
       3     
       4     
       5      6      7      8      9     10

View Code

2.file的input标签

3.修改form表单，后台获得图片相关信息

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                     ""],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