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

就是有张图片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
你好杰米 经测试此法可行,还很方便
一年多之前 回复
cr4blm123
阿小狸 。。。蛋疼,代码是没问题的,自己写的也测试过,把里面<br>这个CSDN自己加的批量替换掉,拷贝到HTML文件试试
一年多之前 回复

用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问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问

相似问题

2
关于前端页面带参数跳转的问题
1
请教大神前端页面切换问题
3
java前后端分离之后前端怎么展示数据
1
前端问题:如何让自己的页面在用户手机中,强制不旋转。(video)
0
后台传来的json对象在前端页面显示不完整
2
springboot如何获取oss服务器的签名权限 让前端页面可以访问文件或图片的链接地址打开图片
1
淘宝商品详情图片接口返回的图片链接结果怎么提取并直接显示在前端网页
3
后端实时获取类似json格式的数据,获取后进行处理,传向前端页面,前端可以实时显示处理后的数据?
1
vue+node解决在页面显示存储在数据库的图片
2
后台定时推送消息至前端,刷新前端页面局部数据
0
OAuth2怎么设计后台用户和前端用户分开授权。
3
django 将二进制图片数据在前端显示
0
python使用爬虫向网页后端发送图片,但是在前端的首页却无法显示图片,可是其他地方却能显示?
1
django后端使用了fastdfs存储,那么用户怎么在前端input上传图片到服务器并被接收
1
java spring的view对象如何处理一个jsp里的图片链接给前端
4
spring boot 访问HTML 总是有缓存,如何修改前端页面实时生效
3
(小白)关于javaweb网页,注册时,图片上传,路径存数据库,再在前端显示的教学视频 可以分享一下吗
2
前端页面和后台程序分离 前端运行在node.js中
1
急急!求救!线上访问后端获取不到前端Header的携带数据!!!本地环境却可以!
1
前端怎么能够打开本地的PDF文件