在遇到这个问题的时候我也查了很多解决方法,之所以会出现这个问题,是出于浏览器的安全机制,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);
这种方法比较直接了,大家如果有其他方法欢迎讨论。