我们在使用html中的<input type="file">控件上传文件时,有时需要在本页面获取上传文件的路径名称,但是由于现在浏览器出于安全考虑,大多数都无法获得文件的真实路径。如果要在js中解决这个问题,可以区别不同品牌的浏览器,进行不同的操作来获得文件的真实路径,比如谷歌浏览器可以用:window.webkitURL.createObjectURL(File file)来获得,详细代码如下:
1、首先定义文件上传和预览照片的两个控件:
<input type="file" name="pic" onChange="showPic(this)">
<img src="" id="preview" width="300" height="240" style="opacity:0"> // 用于显示上传的图片,默认定义为不显示
2、在js中定义两个函数:
function showPic(obj) {
var fileUrl = getObjectURL(obj.files[0]);
if (fileUrl != null) {
document.getElementById("preview").src = fileUrl; // 图片预览
document.getElementById("preview").style = "opacity:1";
}
}
//建立一个可存取到该file的url
function getObjectURL(file) {
var url = null;
// 下面函数执行的效果是一样的,只是需要针对不同的浏览器执行不同的 js 函数而已
if (window.createObjectURL != undefined) { // basic
url = window.createObjectURL(file);
} else if (window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url;
}
在getObjectURL(file)函数中可以区分不同的浏览器,获得文件的真是路径。