为什么要使用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>
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
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 });
css
1 .imgInit { 2 width:auto;height:160px; 3 } 4 .imgPreview { 5 width: auto; height: auto; max-width: 100%; max-height: 100%; 6 }