最近需要一个预览文件功能的页面，在本地运行，但发现js无法获取本地完整路径。
现代浏览器出于安全考虑在所有路径前加上了\fakepath\前缀
考虑在后端php渲染，但是那样要先开服务器有点麻烦

解决方案：
Blob URL只能由浏览器在内部生成。URL.createObjectURL()将创建一个特殊的Blob或File对象的引用

URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。

关键代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
document.querySelector('#files').onchange = function () {
  var paths = this.files;
  var clear = document.getElementsByTagName('img');
  for (var i = clear.length-1; i >= 0; i--) {
    clear[i].parentNode.removeChild(clear[i]);
  }
/*
    发现写的有点问题，正序遍历这个下标会失效，改为逆序遍历，
也可以用更简单的方法 ，直接清空html
*/
  for (var i = 0; i < paths.length; i++) {
    var oImg = document.createElement('img');
    oImg.src = URL.createObjectURL(paths[i]);
    document.querySelector('body').appendChild(oImg);
  }
}