JS获取IE上传文件路径、后缀、大小、文件名代码


本文章先给大家介绍一个很不错的在ie7,ie8中可获取上传文件路径的函数，后来再详细的补充了一些在ff下获取后缀、大小、文件名代码，各位朋友可参考。



兼容ie7,8获取上传文件路径

 代码如下

复制代码

function validateFileSize(id, maxsize) {
             var btnsave = document.getElementById("Button2");
             btnsave.disabled = false;
             var filepath = "";
             var fileupload = document.getElementById(id);
             if (fileupload.value.length < 5) { alert('请选择文件！'); return; }
             var agent = window.navigator.userAgent;
             if (document.all) {
                 var isIE7 = agent.indexOf('MSIE 7.0') != -1;
                 var isIE8 = agent.indexOf('MSIE 8.0') != -1;
                 //IE7和IE8获得文件路径
                 if (isIE7 || isIE8) {
                     fileupload.select();
                     filepath = document.selection.createRange().text;
                 }
                 //IE6获得文件路径
                 else
                 { filepath = file.value; }
                 //PageMethods.ValidateFile(filepath, maxsize, ieCallBack);
                 alert(filepath);
             }
             if (agent.indexOf("Firefox") >= 1) {
                 alert("FF");
                 alert(getValue());
                 return false;
                 if (fileupload.files) {
                     var size = fileupload.files[0].fileSize;
                     if (size > parseInt(maxsize)) {
                         fileupload.parentNode.innerHTML = '<input type="file" name="' + fileupload.name + '" id="' + fileupload.id + '" οnchange="disableSave(this);"/> ';
                         alert("文件超过大小！");
                     }
                     else { alert("文件上传成功！"); }
                 }
             }
         }

 

再补充一些关于文件上传获取的代码（上传文件路径，后缀，大小，文件名）

 代码如下

复制代码

/**
 *函数描述：获取input type=file的图像全路径
 * @obj input type=file的对象
 **/
 function getFullPath(obj)
 {
 if(obj)
 {
 //ie
 if (window.navigator.userAgent.indexOf("MSIE")>=1)
 {
 obj.select();
 return document.selection.createRange().text;
 }
 //firefox else if(window.navigator.userAgent.indexOf("Firefox")>=1)
 {
 if(obj.files)
 {
 return obj.files.item(0).getAsDataURL();
 }
 return obj.value;
 }
 return obj.value;
 }
 } 
<input type="file" οnchange="document.getElementById('img').src=getFullPath(this);" >
 
  #判断IE还是Firefox
function getFullPath(obj)
{
if(obj)
{
//ie
if (window.navigator.userAgent.indexOf("MSIE")>=1)
{
obj.select();
return document.selection.createRange().text;
}
//firefox
else if(window.navigator.userAgent.indexOf("Firefox")>=1)
{
if(obj.files)
{
return obj.files.item(0).getAsDataURL();
}
return obj.value;
}
return obj.value;
}
} 
 
 
#判断后缀名
function yulan(){
var filePath =getFullPath(document.getElementById('UpFile'));
var fileText =filePath.substring(filePath.lastIndexOf("."),filePath.length);
var fileName =fileText.toLowerCase();
if ((fileName!='.jpg')&&(fileName!='.gif')&&(fileName!='.jpeg')&&(fileName!='.png')&&(fileName!='.bmp'))
{
alert("对不起，系统仅支持标准格式的照片，请您调整格式后重新上传，谢谢 ！");
document.form1.UpFile.focus();
}
else
{
document.getElementById("preview").innerHTML="<img src='"+getFullPath(document.getElementById('UpFile'))+"' width=120 style='border:6px double #ccc'>";
}
}
 
 
#判断文件大小
var Sys = {};
if(navigator.userAgent.indexOf("MSIE")>0) {
Sys.ie=true;
}
if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
Sys.firefox=true;
}
 
var maxLength = 5*1024*1024;
 
function checkFileChange(obj) {
var filesize = 0;
if(Sys.firefox){
filesize = obj.files[0].fileSize;
}else if(Sys.ie){
var filePath = obj.value;
var image=new Image();
image.src=filePath;
filesize=image.fileSize;
}
alert(filesize);
}
 
 
 
#判断后缀名
function yulan(){
var filePath =getFullPath(document.getElementById('UpFile'));
var fileText =filePath.substring(filePath.lastIndexOf("."),filePath.length);
var fileName =fileText.toLowerCase();
if ((fileName!='.jpg')&&(fileName!='.gif')&&(fileName!='.jpeg')&&(fileName!='.png')&&(fileName!='.bmp'))
{
alert("对不起，系统仅支持标准格式的照片，请您调整格式后重新上传，谢谢 ！");
document.form1.UpFile.focus();
}
else
{
document.getElementById("preview").innerHTML="<img src='"+getFullPath(document.getElementById('UpFile'))+"' width=120 style='border:6px double #ccc'>";
}
}
 
 
#判断文件大小
var Sys = {};
if(navigator.userAgent.indexOf("MSIE")>0) {
Sys.ie=true;
}
if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
Sys.firefox=true;
}
 
var maxLength = 5*1024*1024;
 
function checkFileChange(obj) {
var filesize = 0;
if(Sys.firefox){
filesize = obj.files[0].fileSize;
}else if(Sys.ie){
var filePath = obj.value;
var image=new Image();
image.src=filePath;
filesize=image.fileSize;
}
alert(filesize);
}

可能有些朋友会碰到IE浏览器上传文件时本地路径变成”C:fakepath”的问题

这在IE7及以前的IE浏览器版本上都没有问题，但是到IE8上面，就不行了，在IE8中你只会获取到这样的路径："C:fakepathxxx”，其中xxx是你的文件名。

这是怎么回事呢？
原来，IE8出于安全性的考虑，上传文件时屏蔽了真实的本地文件路径，而以“C:fakepath”取代之。

但是我们就是想要获取真实的本地文件路径怎么办呢？

你可以通过设置浏览器安全选项得到真实路径：

Internet选项 -> 安全 -> 自定义级别 -> 将本地文件上载至服务器时包含本地目录路径 -> 选“启动” -> 确定

但是，作为开发者，我们不能指望客户去这么做，所以我们必须通过代码解决这个问题。

例如我的上传文件控件的HTML代码是：

 代码如下

复制代码

<input id="file_upl" type="file" />

那么在JS代码中我就可以这样来获取真实的文件路径：

 代码如下

复制代码

var file_upl = document.getElementById('file_upl');
 file_upl.select();var realpath = document.selection.createRange().text;
var file_upl = document.getElementById('file_upl');
 file_upl.select();var realpath = document.selection.createRange().text;

如果我们用的是Ext，那么我们会使用Ext.ux.form.FileField组件，假设我们赋给它的id是"file_upl"，这时同样会产生上面的问题，解决的办法也是一样，但是我们获取到type为file的input才行，而根据"file_upl"获取到的元素根本不是我们所需要的，Ext是自动生成了一个type为file的input，你可以通过DebugBar或其他类似工具看到这个input，它的id是赋给Ext.ux.form.FileField的id加上"-file"的后缀，也就是"file_upl-file"，所以获取真实文件路径的
JS代码就是：

 代码如下

复制代码

var file_upl = document.getElementById('file_upl-file');
 file_upl.select();var realpath = document.selection.createRange().text;
var file_upl = document.getElementById('file_upl-file');
 file_upl.select();var realpath = document.selection.createRange().text;