【前端问题】请问我怎么在页面上显示用户本地的图片？

Question

就是有张图片1.jpg，在用户的 D:/file/1.jpg 下
我拿到了这个path，怎么显示在我的页面上

ps：想做上传图片回显功能，不知道怎么弄

Answer 1

我采用的是HTML5的方法，里面有涉及到一些HTML的js对象。

核心只有一个，FileReader()对象。

而且需要明白的是，你不能直接通过浏览器去获取磁盘文件，那样属于非法的，正确的行为是让用户去选择磁盘文件，然后通过上传来获取到这个文件。

至于直接把src改成磁盘文件路径的做法是行不通的，就算有办法去实现也是非法的。

<br> //window的onload事件<br> window.onload = function (){<br> //给input绑定onchange事件<br> document.getElementById(&quot;input&quot;).onchange = function (){<br> //实例化一个FileReader对象<br> var fileReader = new FileReader();<br> //设置FileReader对象初始化<br> fileReader.onload = function (event) {<br> //这块的可以去查HTML的FileReader对象对应的API<br> document.getElementById(&quot;img&quot;).src = event.target.result;<br> image = event.target.result;<br> }<br> //很不推荐使用this关键字 能不用则不用<br> //fileReader.readAsDataURL(this.files[0]);<br> //采用DataURL编码<br> fileReader.readAsDataURL(document.getElementById(&quot;input&quot;).files[0]);<br> };<br> };<br>