关于input file img实时预览获取文件路径的问题

  要做图片上传嘛，肯定要做实时预览。贴代码算了；

<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的方式，待会再贴出来。