扫码关注官方订阅号
上传图片后如何实时 预览
认证高级PHP讲师
谢邀吧，我尽量把要说的写简单一点：
首先，我假设你有一个标签input用来选择图片，还有一个img标签用来预览，html大致如下：
input
img
html
<input id="imgPicker" type="file" /> <img id="preview" />
然后，我们需要监听input标签的change事件，用来观察用户是否选中了图片，并且图片是什么，代码大致如下：
change
document .querySelector('#imgPicker') .addEventListener('change', function(){ //当没选中图片时，清除预览 if(this.files.length === 0){ document.querySelector('#preview').src = ''; return; } //实例化一个FileReader var reader = new FileReader(); reader.onload = function (e) { //当reader加载时，把图片的内容赋值给 document.querySelector('#preview').src = e.target.result; }; //读取选中的图片，并转换成dataURL格式 reader.readAsDataURL(this.files[0]); }, false);
使用HTML5的FileReader来读取图片，将读取结果直接替换到img的src属性上即可。直接上代码了，应该比较好懂：
FileReader
input.onchange = function () { var imgFile = input.files[0]; var fr = new FileReader(); fr.onload = function () { img.src = fr.result; }; // 注意要先设置回调再读取文件 fr.readAsDaraURL(imgFile); };
注意要先设置回调再读取文件。重要的事情说两遍。
其实楼上已经给出了方案。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="file" id="file" name="" /> <p id="image" style="width:390px;height:280px; background:#CCCCCC; float:left;"> <img src="__PUBLIC__/images/tu.png" /> </p> </body> <script> document.getElementById('file').onchange = function() { var imgFile = this.files[0]; var fr = new FileReader(); fr.onload = function() { document.getElementById('image').getElementsByTagName('img')[0].src = fr.result; }; fr.readAsDataURL(imgFile); }; </script> </html>
告诉你个很简单的方法，不需要上传到服务器，直接浏览器选择图片就可以预览，视频也行。那就是：
var src=window.URL.createObjectURL(blob)//这里传一个文件对象 例如：file.files[0] img.src=src;
window.URL.createObjectURL 这个函数会创建一个临时的地址，把地址设置到src上就行了。
window.URL.createObjectURL
推荐一个：
JS兼容各个浏览器的本地图片上传即时预览效果
不同浏览器对HTML5的支持度不一样，如果需要考虑到向下兼容，可以参考这篇文章另外还有一种解决方案：即图片上传完成之后，服务器返回上传的图片URL，然后创建img标签即可
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
0 
5
689
收藏
谢邀吧，我尽量把要说的写简单一点：
首先，我假设你有一个标签
input用来选择图片，还有一个img标签用来预览，html大致如下：然后，我们需要监听
input标签的change事件，用来观察用户是否选中了图片，并且图片是什么，代码大致如下：使用HTML5的
FileReader来读取图片，将读取结果直接替换到img的src属性上即可。直接上代码了，应该比较好懂：注意要先设置回调再读取文件。重要的事情说两遍。
其实楼上已经给出了方案。
告诉你个很简单的方法，不需要上传到服务器，直接浏览器选择图片就可以预览，视频也行。
那就是：
window.URL.createObjectURL这个函数会创建一个临时的地址，把地址设置到src上就行了。推荐一个：
不同浏览器对HTML5的支持度不一样，如果需要考虑到向下兼容，可以参考这篇文章
另外还有一种解决方案：即图片上传完成之后，服务器返回上传的图片URL，然后创建img标签即可