- 圖片上傳本地預覽插件,本示例只是靜態頁面,請下載完整的示例查看
- 請下載完整的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以及完整的代碼
