IE浏览器上传文件时本地路径变成”C:\fakepath\”的问题

在使用<input id="file_upl" type="file" />控件上传文件时，有时会需要获取文件本地路径展示给客户，这时可以通过这样的方式获取文件本地路径：

document.getElementById('file_upl').value

这在IE7及以前的IE浏览器版本上都没有问题，但是到IE8上面，就不行了，在IE8中你只会获取到这样的路径："C:\fakepath\xxx”，其中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;

如果我们用的是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;

此方案只针对IE浏览器，对其他浏览器火狐，js代码如下：

//附带不用修改浏览器安全配置的javascript代码，兼容ie， firefox全系列

function getPath(obj)  //参数obj为input file对象
{  
  if(obj)  
    {  
 
    if (window.navigator.userAgent.indexOf("MSIE")>=1)  
      {  
        obj.select();  
 
      return document.selection.createRange().text;  
      }  
 
    else if(window.navigator.userAgent.indexOf("Firefox")>=1)  
      {  
      if(obj.files)  
        {  
 
        return obj.files.item(0).getAsDataURL();  
        }  
      return obj.value;  
      }  
    return obj.value;  
    }  
}