论坛首页 Web前端技术论坛

javascript判断上传图片文件类型(后缀名)

浏览 14407 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2011-08-07  

 

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

 

/*
 * 判断图片类型
 * 
 * @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);

 

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

 

/*
 * 判断图片大小
 * 
 * @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;
}

 

求解....

求解....

 

 

ths.value = "";  // IE无效

..讨厌的浏览器兼容问题!

 

.

   发表时间:2011-08-07  
汗,要百度干嘛——

input.fileName
input.fileSize
0 请登录后投票
   发表时间:2011-08-08  
key232323 写道
汗,要百度干嘛——

input.fileName
input.fileSize



.....主要是判断图片像素大小那有问题
0 请登录后投票
   发表时间:2011-08-08  
java110eye 写道
key232323 写道
汗,要百度干嘛——

input.fileName
input.fileSize



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


哦,我没仔细看——原来客户端js也可以获取上传图片长宽?
0 请登录后投票
   发表时间:2011-08-09   最后修改:2011-08-09
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>


还可以用
 if (isIE && !obj.files) {    
      var filePath = obj.value;
var fileSystem = new ActiveXObject("Scripting.FileSystemObject");       
      var file = fileSystem.GetFile (filePath);
      fileSize = file.Size;
宽高就用你的方法去获取。
    }
0 请登录后投票
   发表时间:2011-08-10  
img.src = ths.value;  这样的写法在IE7之后就行不通了吧
0 请登录后投票
   发表时间:2011-08-11  
嗯,挺好的
我提个相关的问题吧 判断文件类型不能只通过文件的后缀名的...当然这些要到后台才可以判断 恶意用户可以将一个病毒文件修改进行上传
0 请登录后投票
   发表时间:2011-08-14  
上传文件前端稍微控制一下但是,主要的判断最好还是通过后台程序通过读取文件头信息的方式来判断:D
0 请登录后投票
   发表时间:2011-08-15  
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>


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




firefox下呢?

晕,....chrome还忘了测试...

0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics