图片上传本地预览(回显)插件

  • 图片上传本地预览插件,本示例只是静态页面,请下载完整的示例查看
  • 请下载完整的js和css样式,以及Demo
<html>
    <title>文件上传</title>
    <head>
    <link rel="stylesheet" href="uploadPreview.css">
    <script src="uploadPreview.js"></script> 
    <script>        
        window.onload=function(){ 
            new uploadPreview({
                UpBtn : "up_img_zs",
                DivShow : "imgdiv_zh",
                ImgShow : "imgShow_zs"
            });
            new uploadPreview({
                UpBtn : "up_img_cp",
                DivShow : "imgdiv_cp",
                ImgShow : "imgShow_cp"
            });
        } 
    </script>
    </head>
    <body>
        <tr>
           <td colspan="2">
                    <div class="form-group">
                        <label class="col-lg-3 control-label">证书图片:</label>
                        <div class="col-lg-9">
                            <div id="imgdiv_zh" class="idiv">
                                <img src="none.png" id="imgShow_zs" />
                            </div>
                            <div class="file-box">
                                <input type='button' class='btn  btn-success' value='浏览' id="" />
                                <input type="file" name="zsPicter"  class="file"  id="up_img_zs" size="28"  />
                            </div>
                            <div class="clearfix"></div>
                        </div>
                    </div>
                </td>
        </tr>
        <tr>
           <td colspan="2">
                <div class="form-group">
                    <label class="col-lg-3 control-label">产品图片:</label>
                    <div class="col-lg-9">
                        <div id="imgdiv_cp" class="idiv">
                        <img src="none.png" id="imgShow_cp" />
                        </div>
                        <div class="file-box">
                                 <input type='button' class='btn  btn-success' value='浏览' id="" />
                                 <input type="file" name="cpPicter"  class="file"  id="up_img_cp" size="28"  />
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </td>
        </tr>
    </body>
</html>
  • 做出来的效果图片展示
    这里写图片描述

点击下载js+css以及完整的代码

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章