HTML图片上传实时预览js

2024-10-22 16:50:39

<style>
*{margin:0; padding:0;}
form{background:#F1F1F1;}
.bbg{background:url(../images/add_ico.jpg) no-repeat; height:65px;}
.fileInput{cursor:pointer;opacity:0.0; width:70px; height:65px;}
button{padding:15px 15px 15px 15px;}
</style>
<form action="upload.asp" method="post" enctype="multipart/form-data" id="form" target="_self" style="font-size:12px; margin:5px;">
<table>
<tr>
<td>
<div class="bbg">
<input name="file" type="file" id="file" accept="image/*" onchange="show(this.files)" class="fileInput">
</div>
</td>
<td>
<img id="img" style="vertical-align:middle;"/>
</td>
<td>
<input type="submit" name="button" id="button" value="上传"></input>
<script type="text/javascript">
function show(f) {
var str = "";
for (var i = 0; i < f.length; i++) {
var reader = new FileReader();
reader.readAsDataURL(f[i]);
reader.onload = function (e) {
str += "<img height='65' width='65' id='img' src='" + e.target.result + "'/>";
$("#img")[0].outerHTML = str;
}
}
}
</script>
</td>
</tr>
</table>
</form>

最新文章

热门文章