URL.createObjectURL()
静态方法会创建一个 DOMString。
其中包含一个表示参数中给出的对象的URL。
这个 URL 的生命周期和创建它的窗口中的document绑定,这个新的URL 对象表示指定的File或Blob对象。
用这个放方法能把img转成一个blob的对象(看上去类似与base64编码的图片格式)
然后把转换的 String放到 img的src中就能实现预览了
PS:这是我见过最简单的一个图片预览的写法了
<img src="" alt="" id="img" style="width: 300px;">
<input id="logo" name="logo" accept="image/*" type="file" value="上传照片" onchange="fileReader()">
<script>
function fileReader(){
var file = document.getElementById("logo");
html5Reader(file);
}
function html5Reader(file) {
var fileObj = file.files[0],
img = document.getElementById("img");
img.src = URL.createObjectURL(fileObj); // URL.createObjectURL safari不支持
}
<script>
没有看错,就是几行代码
下面是效果图