input【type=“file”】上传图片，浏览器路径出现“fakepath”的解决方法

在遇到这个问题的时候我也查了很多解决方法，之所以会出现这个问题，是出于浏览器的安全机制，input file的路径被fakepath代替，隐藏了真实路径。

1.而网上大多数是这种解决方法

使用window.URL.createObjectURL()

var url = null;  
var fileObj = document.getElementById("inputfile").files[0];    //inputfile为input节点的类名 
if (window.createObjcectURL != undefined) {  
    url = window.createOjcectURL(fileObj);  
} else if (window.URL != undefined) {  
    url = window.URL.createObjectURL(fileObj);  
} else if (window.webkitURL != undefined) {  
    url = window.webkitURL.createObjectURL(fileObj);  

• URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。
• DOMString 是一个UTF-16字符串。由于JavaScript已经使用了这样的字符串，所以DOMString 直接映射到 一个String。
• 语法：objcetURL = window.URL.createObjectURL(file || blob);
• 参数：File对象和Blob对象；File对象就是一个文件，比如我用file type=”file”标签来上传文件，那么里面的每个文件都是
  一个file对象。Blob对象就是二进制数据，比如在XMLHttpRequest里，如果指定requestType为blob，那么得到的返回值也是
  一个blob对象。

这种方法生成的路径转化为 “blob|null+一段无序码”

这种方法，适用于单次浏览，没法，永久存储。因为这个 URL 的生命周期和创建它的窗口中的 document 绑定，意味着每次刷新，这个资源就会被释放掉。

所以对于我做的本地存储功能不是很适合，我只能寻求别的方法。也就是自己的土方法

2.直接获取图片名，设定固定路径

分为两步：
1.获取文件名

let files = document.getElementById("inputfile1").files;     // inputfile1是input的类名
 let itemfile = files[0].name;   //获取input标签中的图片路径的名字，0代表选中的图片。第一个

2.设定固定路径（前提是把你所要用的图片都存放在images文件夹中）

  // 获取要添加图片的img标签
        let img = $(".good-link").children("img").last();
        img.src = "images/" + itemfile;
        // 给img增加属性
        img.attr('src', img.src);

这种方法比较直接了，大家如果有其他方法欢迎讨论。