javascript判断上传图片文件类型（后缀名）

  
1、根本是正则表达式,不存在浏览器问题

Js代码  
/*  
* 判断图片类型  
*   
* @param ths   
*          type="file"的javascript对象  
* @return true-符合要求,false-不符合  
*/  
function checkImgType(ths){   
    if (ths.value == "") {   
        alert("请上传图片");   
        return false;   
    } else {   
        if (!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(ths.value)) {   
            alert("图片类型必须是.gif,jpeg,jpg,png中的一种");   
            ths.value = "";   
            return false;   
        }   
    }   
    return true;   
}  

/*
* 判断图片类型
*
* @param ths
*                         type="file"的javascript对象
* @return true-符合要求,false-不符合
*/
function checkImgType(ths){
        if (ths.value == "") {
                alert("请上传图片");
                return false;
        } else {
                if (!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(ths.value)) {
                        alert("图片类型必须是.gif,jpeg,jpg,png中的一种");
                        ths.value = "";
                        return false;
                }
        }
        return true;
}

2、以下判断像素的在firefox下不行,主要是这句代码document.body.insertAdjacentElement("beforeEnd", img);

暂时未找到解决办法....

Js代码  
/*  
* 判断图片大小  
*   
* @param ths   
*          type="file"的javascript对象  
* @param width  
*          需要符合的宽   
* @param height  
*          需要符合的高  
* @return true-符合要求,false-不符合  
*/  
function checkImgPX(ths, width, height) {   
    var img = null;   
    img = document.createElement("img");   
    document.body.insertAdjacentElement("beforeEnd", img); // firefox不行   
    img.style.visibility = "hidden";   
    img.src = ths.value;   
    var imgwidth = img.offsetWidth;   
    var imgheight = img.offsetHeight;   
      
    alert(imgwidth + "," + imgheight);   
      
    if(imgwidth != width || imgheight != height) {   
        alert("图的尺寸应该是" + width + "x"+ height);   
        ths.value = "";   
        return false;   
    }   
    return true;   
}  

/*
* 判断图片大小
*
* @param ths
*                         type="file"的javascript对象
* @param width
*                         需要符合的宽
* @param height
*                         需要符合的高
* @return true-符合要求,false-不符合
*/
function checkImgPX(ths, width, height) {
        var img = null;
        img = document.createElement("img");
        document.body.insertAdjacentElement("beforeEnd", img); // firefox不行
        img.style.visibility = "hidden";
        img.src = ths.value;
        var imgwidth = img.offsetWidth;
        var imgheight = img.offsetHeight;
       
        alert(imgwidth + "," + imgheight);
       
        if(imgwidth != width || imgheight != height) {
                alert("图的尺寸应该是" + width + "x"+ height);
                ths.value = "";
                return false;
        }
        return true;
}
求解....
求解....


Js代码  
ths.value = "";  // IE无效  

ths.value = "";  // IE无效..讨厌的浏览器兼容问题！

.

汗，要百度干嘛——

input.fileName
input.fileSize

key232323 写道
汗，要百度干嘛——

input.fileName
input.fileSize



.....主要是判断图片像素大小那有问题

java110eye 写道
key232323 写道
汗，要百度干嘛——

input.fileName
input.fileSize



.....主要是判断图片像素大小那有问题


哦，我没仔细看——原来客户端js也可以获取上传图片长宽？

IE 可以用下面的方法。
  
function getfile(obj){   
if (window.navigator.userAgent.indexOf("MSIE") >= 1) {   
                        // ie   
                        obj.select();   
                        o.filename = document.selection.createRange().text;   
                        var image = new Image();   
                        image.dynsrc = o.filename;   
                        o.filesize = image.fileSize;   
...宽高就用你的方法去获取。   
                    }   
....   
}   
  
<input type="file" onchange='getfile(this)'>file</input>  

function getfile(obj){
if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
                        // ie
                        obj.select();
                        o.filename = document.selection.createRange().text;
                        var image = new Image();
                        image.dynsrc = o.filename;
                        o.filesize = image.fileSize;
...宽高就用你的方法去获取。
                    }
....
}

<input type="file" onchange='getfile(this)'>file</input>


还可以用
  
if (isIE && !obj.files) {      
      var filePath = obj.value;   
var fileSystem = new ActiveXObject("Scripting.FileSystemObject");         
      var file = fileSystem.GetFile (filePath);   
      fileSize = file.Size;   
宽高就用你的方法去获取。   
    }  

if (isIE && !obj.files) {   
      var filePath = obj.value;
var fileSystem = new ActiveXObject("Scripting.FileSystemObject");      
      var file = fileSystem.GetFile (filePath);
      fileSize = file.Size;
宽高就用你的方法去获取。
    }

img.src = ths.value;  这样的写法在IE7之后就行不通了吧

嗯，挺好的
我提个相关的问题吧 判断文件类型不能只通过文件的后缀名的...当然这些要到后台才可以判断 恶意用户可以将一个病毒文件修改进行上传

上传文件前端稍微控制一下但是，主要的判断最好还是通过后台程序通过读取文件头信息的方式来判断

feige05 写道
IE 可以用下面的方法。
  
function getfile(obj){   
if (window.navigator.userAgent.indexOf("MSIE") >= 1) {   
                        // ie   
                        obj.select();   
                        o.filename = document.selection.createRange().text;   
                        var image = new Image();   
                        image.dynsrc = o.filename;   
                        o.filesize = image.fileSize;   
...宽高就用你的方法去获取。   
                    }   
....   
}   
  
<input type="file" onchange='getfile(this)'>file</input>  

function getfile(obj){
if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
                        // ie
                        obj.select();
                        o.filename = document.selection.createRange().text;
                        var image = new Image();
                        image.dynsrc = o.filename;
                        o.filesize = image.fileSize;
...宽高就用你的方法去获取。
                    }
....
}

<input type="file" onchange='getfile(this)'>file</input>


还可以用
  
if (isIE && !obj.files) {      
      var filePath = obj.value;   
var fileSystem = new ActiveXObject("Scripting.FileSystemObject");         
      var file = fileSystem.GetFile (filePath);   
      fileSize = file.Size;   
宽高就用你的方法去获取。   
    }  

if (isIE && !obj.files) {   
      var filePath = obj.value;
var fileSystem = new ActiveXObject("Scripting.FileSystemObject");      
      var file = fileSystem.GetFile (filePath);
      fileSize = file.Size;
宽高就用你的方法去获取。
    }



firefox下呢？
晕,....chrome还忘了测试...