网站地图    收藏   

主页 > 前端 > javascript >

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

来源:自学PHP网    时间:2014-09-19 14:47 作者: 阅读:

[导读] 本文章先给大家介绍一个很不错的在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 + '" onchange="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" onchange="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);

}

可能有些朋友会碰到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;

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

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论