input type="file"标签图片上传路径fakepath问题

最新推荐文章于 2025-04-26 08:42:21 发布

Mr.hades

最新推荐文章于 2025-04-26 08:42:21 发布

阅读量3.6k

点赞数 3

文章标签： js input fakepath 图片路径问题

本文链接：https://blog.csdn.net/qq_41242758/article/details/88887604

版权

本文介绍了解决HTML图片上传预览时出现的C:fakepath路径问题的方法。通过使用window.URL.createObjectURL(file||blob)，可以获取到一个可用于预览的图片路径。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图片上传路径C:\fakepath\问题

今天在写html图片input标签图片上传预览，出现了C:\fake\路径问题，在纠结了一个多小时为什么的时候，实在不知道怎么办了，就来博客找大佬，才发现由于浏览器的安全机制，把要上传的图片真实路径给隐藏了，对外只显示C:\fakepath+图片名

我们需要对图片路径进行处理，要用到objcetURL = window.URL.createObjectURL(file || blob);
语法：objcetURL = window.URL.createObjectURL(file || blob);
参数：File对象和Blob对象；File对象就是一个文件，比如：用file type=”file”标签来上传文件，那么里面的每个文件都是一个file对象。Blob对象就是二进制数据，比如在XMLHttpRequest里，如果指定requestType为blob，那么得到的返回值也是一个blob对象。
每次调用createObjectURL的时候，一个新的URL对象就被创建了。即使你已经为同一个文件创建过一个URL.，如果你不再需要这个对象，要释放它，需要使用URL.revokeObjectURL()方法.。当页面被关闭，浏览器会自动释放它，但是为了最佳性能和内存使用，当确保不再用得到它的时候,就应该释放它。
URL对象是硬盘（SD卡等）指向文件的一个路径，如果我们做文件上传的时候，想在没有上传服务器端的情况下看到上传图片的效果图的时候就可是以通过var url=window.URL.createObjectURL(obj.files[0]);获得一个http格式的url路径，这个时候就可以设置到中显示了。
window.webkitURL和window.URL是一样的，window.URL标准定义，window.webkitURL是webkit内核的实现（一般手机上就是使用这个），还有火狐等浏览器的实现。

话不多说，上代码：纯js代码

function getObjectURL(file) { 
		var url = null; 
		if (window.createObjcectURL!= undefined) { 
			url = window.createOjcectURL(file);
		} else if (window.URL != undefined) {
			url = window.URL.createObjectURL(file);
		} else if (window.webkitURL != undefined) { 
			url = window.webkitURL.createObjectURL(file);
		} 
		return url; 
	}

function previewImg(obj){
    //通过id获取input框，files[0]是获取第一个文件
    
	var file = document.getElementById("myfile").files[0]；
	
	//调用getObjectURL(file)方法返回图片真实路径blob:null/61de3aa9-a75f-4265-
	9d4b-50d4b5977dda，这里的路径是加密的
	
	var str = getObjectURL(file);
	
	//通过在网页中添加innerHTML属性在div中添加img标签
	
	document.getElementById("previewImg").innerHTML="<img src='"+file+"'/>";
}

关于window.URL.createObjectURL(file || blob)详情请参考Web API