<input type="file" id="file" name="" />
<div id="image" style="width:390px;height:280px; background:#CCCCCC; float:left;">
<img src="__PUBLIC__/images/tu.png" />
</div>
上传图片后如何实时 预览
<input type="file" id="file" name="" />
<div id="image" style="width:390px;height:280px; background:#CCCCCC; float:left;">
<img src="__PUBLIC__/images/tu.png" />
</div>
上传图片后如何实时 预览
使用HTML5的FileReader
来读取图片,将读取结果直接替换到img的src属性上即可。直接上代码了,应该比较好懂:
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="" />
<div id="image" style="width:390px;height:280px; background:#CCCCCC; float:left;">
<img src="__PUBLIC__/images/tu.png" />
</div>
</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上就行了。
推荐一个:
不同浏览器对HTML5的支持度不一样,如果需要考虑到向下兼容,可以参考这篇文章
另外还有一种解决方案:即图片上传完成之后,服务器返回上传的图片URL,然后创建img标签即可
谢邀吧,我尽量把要说的写简单一点:
首先,我假设你有一个标签
input
用来选择图片,还有一个img
标签用来预览,html
大致如下:然后,我们需要监听
input
标签的change
事件,用来观察用户是否选中了图片,并且图片是什么,代码大致如下: