bootstrap-fileinput使用

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

1.引入js,css

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="css/fileinput.min.css" rel="stylesheet" type="text/css" />
    <link href="css/theme.css" rel="stylesheet" type="text/css" />
    <script src="../../Scripts/bootstrap/js/jquery-3.1.0.min.js" type="text/javascript"></script>
    <script src="js/sortable.js" type="text/javascript"></script>
    <script src="js/fileinput.js" type="text/javascript"></script>
    <script src="js/zh.js" type="text/javascript"></script>
    <script src="js/theme.js" type="text/javascript"></script>
    <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.后台代码，上传图片至服务器

 #region 上传模板预览图

                string fileName = string.Empty;
                System.Web.HttpFileCollection files = Request.Files;
                for (int fileCount = 0; fileCount < files.Count; fileCount++)
                {
                    System.Web.HttpPostedFile postedfile = files[fileCount];
                    fileName = System.IO.Path.GetFileName(postedfile.FileName);
                    if (!String.IsNullOrEmpty(fileName))
                    {
                        string fileExtenstion = System.IO.Path.GetExtension(fileName);//获取文件类型
                        //上传目录
                        string directory = Server.MapPath("/Upload/Template/");
                        //文件全路径
                        if (uid == 0)//新增
                            fileName = T_COM_TemplateInfoBll.Instance.GetRecordNum() + fileExtenstion;
                        else//编辑
                            fileName = temp.TempPreview;

                        string path = directory + fileName;
                        //判断目录是否存在
                        if (!Directory.Exists(directory))
                        {
                            Directory.CreateDirectory(directory);
                        }
                        //文件存在就删除文件
                        if (File.Exists(path))
                        {
                            File.Delete(path);
                        }
                        //上传到服务器的路径
                        postedfile.SaveAs(path);
                    }
                }
                #endregion

5.编辑时，预览图片

 //初始化图像信息
        function initPortrait(ctrlName, id) {
            var control = $('#' + ctrlName);
            var imageurl = '../../Upload/Template/<%=temp.TempPreview %>?r=' + Math.random();

            //重要，需要更新控件的附加参数内容，以及图片初始化显示
            control.fileinput('refresh', {
                initialPreview: [//预览图片的设置
                    "<img src='" + imageurl + "' class='file-preview-image imgInit' alt='' title='imgPreview'>"],
            });
        }

//缩略图和预览图样式
//编辑预览图片大小
            $("div table button[title='查看详情']").click(function () {
                var img_tag = $(".kv-zoom-body").find('img');
                img_tag.removeClass("imgInit").addClass("imgPreview");
            });

css

.imgInit {
            width:auto;height:160px;
        }
        .imgPreview {
            width: auto; height: auto; max-width: 100%; max-height: 100%;
        }