Question

求助！用javascript限制上传照片时的大小或者宽高！在客户端！从网上找了很多，修改后都不能实现啊！急！

那位高手有的话，帮忙下，这是网上找的一段代码；<script language="JavaScript" type="text/JavaScript">
var img=null;
function checkPic(picForm){
var location=picForm.pic.value;
if(location==""){
alert("请先选择图片文件");
return false;
}
var point = location.lastIndexOf(".");
var type = location.substr(point);
if(type==".jpg"||type==".gif"||type==".JPG"||type==".GIF"){
img=document.createElement("img");
img.src=location;
if(img.fileSize>102400){
alert("图片尺寸请不要大于100KB");
return false;
}else
return true;
}
else{
alert("只能输入jpg或者gif格式的图片");
return false;
}
return true;

}function changesrc(){
yourpic.src=picForm.pic.value;
}</script><table width="100%" border="0">
<tr>
<td>
<div align="center"><img border="1" id="yourpic"
onload="javascript:if(this.width>175)this.width=175;if(this.height>150)this.height=150;">
</div>
</td>
</tr>
<form name="picForm" action="#" method="post"
enctype="multipart/form-data" onsubmit="return checkPic(picForm);">
<tr>
<td>
<div align="center"><input type="file" name="file" size="10"
id="pic" onchange="changesrc()"/></div>
</td>
</tr>
<tr>
<td>
<div align="center"><input type="submit" value="上传照片" /></div>
</td>
</tr></table>
这段代码当上传的图片太大后，按提交表单后，找不到页面，并没有提示图片太大的消息。“img.fileSize的值会为-1，这是网上看见的，”它用onchange="changesrc()"这个来处理，不起作用，怎样才能实现这个功能呢，请各位帮帮忙，新手啊，好多都不懂，弄了一天都还没出来，只有在这儿请大家帮忙了，如果你有更好的代码，而且能够实现这个功能，麻烦你帮帮忙！！！！！！！！！！！非常感谢！！！！！

Answer 1

IE6，7，8，以及firefox没有兼容的！
特别是IE8，不能获得图片大小！
我写过兼容IE6,7和firefox的！
要的话，留言！
function getPath(obj) {
if (obj) {
//ie
if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
obj.select();
// IE下取得图片的本地路径
return document.selection.createRange().text;
}
//firefox
else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {
if (obj.files) {
// Firefox下取得的是图片的数据
return obj.files.item(0).getAsDataURL();
}
return obj.value;
}
return obj.value;
}
}
//var imgObj=new Image();
function ajaxFileUpload(id,obj){
var value=$("#"+id).val();
var path=getPath(document.getElementById(id));
// alert(path);
//path=path.replaceAll("\\","/");
//alert(path);
if(value==null||value.length==0){
alert("请选择要上传的图片");
return ;
}
//var path=getPath();
var img=document.getElementById("indeximg");
var limit = 1024*1024;
var flag;
if(window.addEventListener){ // FF
//alert("ff");
img.src = document.getElementById(id).files[0].getAsDataURL();
setTimeout(function(){
if ( img.complete ) {

var fileObj=document.getElementById(id).files[0];
//alert(fileObj.fileSize);
if (fileObj.fileSize > limit) {
alert("图片太大,图片不能大于1M");
flag=false;
}else{
fileUpload(id,obj);
}
}},100);
}else{
var imgObj = new Image();
var b1=navigator.appVersion.match(/7./i)=="7." ? 'IE7' : 'other version';
var b2=navigator.appVersion.match(/8./i)=="8." ? 'IE8' : 'other version';
if(b1=="IE7"||b2=="IE8"){
// $("#indeximg").bind("load",function(){
// checkSizeInIE8(imgObj,id,obj,img);
// });
fileUpload(id,obj);
// imgObj.src = path;
// img.src=path;
// checkSizeInIE8(imgObj,id,obj,img);
}else{
img.src=path;
//$.post("checkSize.php",{url:value},function(data){
//alert(path);
// });
checkSize(id,img,obj);
/*$.post("checkSize.php",{url:value},function(data){
alert("size"+data);
});*/
}
}
}

function checkSizeInIE8(imgObj,id,obj,img){
//alert(imgObj.src);
if(imgObj.src.split("/")[imgObj.src.split("/").length-1].replaceAll("%20"," ")!=getPath(document.getElementById(id)).split("\\")[getPath(document.getElementById(id)).split("\\").length-1]){ //如果图像是未加载完成进行循环检测
alert("in 1 "+img.fileSize);
setTimeout(function(){
checkSizeInIE8(imgObj,id,obj,img);
},200);
}else if(imgObj.width==0||imgObj.height==0){
alert("in 2 "+imgObj.src+" "+img.height+" "+img.width+" "+img.fileSize);
setTimeout(function(){
checkSizeInIE8(imgObj,id,obj,img);
},200);
}else{
var width = imgObj.width;
var height = imgObj.height;
alert(width+"----"+height);
if(width*height>1024*1024){
alert("上传图片过大，上传的图片不能大于1M");
return;
}else{
fileUpload(id,obj);
}
}
}
function checkSize(id,img,obj){
setTimeout(function(){

if(img.fileSize==-1){
checkSize(id,img,obj);
}else if (img.fileSize > 1024*1024) {
alert("图片太大,图片不能大于1M");
}else if(img.src.split("/")[img.src.split("/").length-1].replaceAll("%20"," ")!=getPath(document.getElementById(id)).split("\\")[getPath(document.getElementById(id)).split("\\").length-1]){
alert(img.src+" "+$("#"+id).val());
checkSize(id,img,obj);
}else{
//alert("图片大小为"+parseInt(img.fileSize/1024)+"K");
fileUpload(id,obj);

}

},200);
}

Answer 2

由于安全机制，只有部分浏览器支持js的fileSize，建议从图片宽高限制
我改了一下你的代码，你试试
<script language="JavaScript" type="text/JavaScript">
var img=null;
var w=100;//限制宽100px
var h=100;//限制高100px
function checkPic(){
var flag=true;
var loc=document.getElementById('pic').value;
if(loc==""){
alert("请先选择图片文件");
flag=false;
}else{
var point = loc.lastIndexOf(".");
var type = loc.substr(point);
if(type==".jpg"||type==".gif"||type==".JPG"||type==".GIF"){
img=document.createElement("img");
img.src=loc;
if(img.width>w){
alert('宽啦');
flag=false;
}else if(img.height>h){
alert('高啦');
flag=false;
}
}else{
alert("只能输入jpg或者gif格式的图片");
flag=false;
}
}
if(flag==true)document.getElementById('picForm').submit();
}
function changesrc(){
document.getElementById('yourpic').src=document.getElementById('pic').value;
}
</script>

<table width="100%" border="0">
<tr>
<td>
<div align="center"><img border="1" width="100" id="yourpic">
</div>
</td>
</tr>
<form name="picForm" id="picForm" action="#" method="post" enctype="multipart/form-data">
<tr>
<td>
<div align="center"><input type="file" name="file" size="10" id="pic" onchange="changesrc()"/></div>
</td>
</tr>
<tr>
<td>
<div align="center"><input type="button" onclick="checkPic()" value="上传照片" /></div>
</td>
</tr>
</table>