有谁知道图片预览的原理？
一般图片，比如头像上传，需要一个预览的功能，预览功能可以使用URL.createObjectURL()来读取本地的图片文件，然后它可以生成一个本地的预览地址。可以实现预览，但是它需要传入一个文件流的方式，比如1.jpg的文件流赋值进去才可以生成地址符。
但是为什么要用这个呢？不能直接获取本地的相对地址吗？比如直接获取D://myImage/1.jpg，然后直接显示呢？
下面就是思否的上传图片的操作：
然后思否的预览是这样做的：
base64实现在线预览：
————————————————————————————————————————————————
上面是提问，下面这里是经过ForkKillet点拨之后补充的：
是的，正如ForkKillet所说,上传文件时的确会生成C:\fakepath\filename.xxx
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>get file input full path</title>
<script type="text/javascript" language='javascript'>
function getFullPath(obj) {
var newPreview = document.getElementById("img");
console.log("newPreview:",newPreview)
if (obj) {
newPreview.src = obj.value;
console.log("用户操作地址：",newPreview.src)
return;
}
}
</script>
</head>
<body>
<input type="file" onchange="getFullPath(this);" />
<img id="img" alt="" style="width:200px; height:200px;" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=578855633,3493363921&fm=26&gp=0.jpg"/>
</body>
</html>
另外MDN文档的解释与ForkKillet解释的是一样的。这个是MDN文档的明确规定,你打开这个地址,然后下拉到注意事项【大概下拉0.6个window窗口高度可以看到】，里面有写：https://developer.mozilla.org...
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
因为安全。
你不可以随意访问用户电脑上的文件，实际上，你连具体的路径都获取不到，而是会得到
C:\fakepath\filename.xxx（任何系统都如此，是遗留设计）也可以从跨域的角度理解，因为当打开离线网页的时候，你会发现它是可以打开本机文件的。这是因为它们的协议都是
file://，因而被认为是安全的。但离线网页不能访问 es module。所以我觉得还是要从安全性来理解。
我以前也考虑过这个授权的问题，我的结论是这种上传 -> 授予读取权限的机制并不是最安全，而且不是很有必要。
<input type="file"/>元素象上的files字段（是一个FileList，包含一些File对象），可以对文件数据进行流等复杂操作。假如只给了一个本地路径的授权，就不太可能完成这些操作，或者又要开放文件读取 API，这更麻烦，且有隐患。web可以直接读取本地文件吗? 这个不是本来就不允许么.