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

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

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

6个回答

我采用的是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>






u011856283
你好杰米 经测试此法可行,还很方便
大约 2 年之前 回复
cr4blm123
阿小狸 。。。蛋疼,代码是没问题的,自己写的也测试过,把里面<br>这个CSDN自己加的批量替换掉,拷贝到HTML文件试试
大约 2 年之前 回复

用file对象给用户选择,无法直接加载指定客户端图片路径,除非你file浏览而不是发布后通过http协议访问

javascript客户端图片预览

设置img标签的src=D:/file/1.jpg

最好看下你页面在哪里 如果跟图片同一个目录图片可以写成 如果上一级就../

src = "1.jpg"



<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>





Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐