要做图片上传嘛,肯定要做实时预览。贴代码算了;
<div class="btn">
<input type="button" name="upload" id="upload" value="上傳" />
<input type="text" name="filename" id="filename" value="" />
<input type="file" class="input-file" id="a" style="display: none;"/>
</div>
<div>
<img src="" alt="" style=" 300px;height: 150px;" id="Img"/>
</div>
<script type="text/javascript">
document.getElementById("upload").onclick=function(){
document.getElementById("a").click();
}
document.getElementById("a").onchange=function(e){
console.log(e.target.files[0])
var imgURL=window.URL.createObjectURL(e.target.files[0]) ;
document.getElementById("filename").value=imgURL;
document.getElementById("Img").src=imgURL;
}
</script>
效果完全ok 能在本地看到图片,注意e.target.files[0].
这个玩意有个版本是e.files【0】就能获取的,因为事件和文件不一样的关系,所以需要注意一些事项。
总之就是加target就ok,这个是简单的,还有使用h5的方式,待会再贴出来。