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

最新推荐文章于 2019-06-11 11:27:00 发布

一天不读书智商变成猪

最新推荐文章于 2019-06-11 11:27:00 发布

阅读量1.5k

点赞数

分类专栏：前端文章标签：图片上传上传回显本地图片回显上传查看

本文链接：https://blog.csdn.net/u013008179/article/details/52278706

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

图片上传本地预览插件,本示例只是静态页面,请下载完整的示例查看
请下载完整的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以及完整的代码

一天不读书智商变成猪

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
图片上传本地预览(回显)插件

图片上传本地预览插件,本示例只是静态页面,请下载完整的示例查看请下载完整的js和css样式,以及Demo&lt;html&gt; &lt;title&gt;文件上传&lt;/title&gt; &lt;head&gt; &lt;link rel="stylesheet" href="uploadPreview.css"&gt; &lt;
复制链接

扫一扫