小弟有一段代码，检测图片上传前格式及大小是否符合规范，在IE下没有问题，可火狐下就不能使用了，而且火狐报错也没有指出错误所在，哪位大哥帮忙给看看吧，小弟谢了先。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head><body>
<script type="text/javascript">
var imgSize = 1024 * 100; //最大100K
function checkImgSize(){
var file = document.getElementById("fuPhoto");
if(file.value != ""){
//检测类型
var val = file.value;
if(/^.*?\.(gif|png|jpg|JPG|JPEG|jpeg|bmp)$/.test(val)){
}else{
alert("只能上传gif, png, jpg, bmp格式的图片");
return false;
}
var img = new Image();
img.onreadystatechange = function(){
if(img.readyState == "complete"){
if(img.fileSize <=0 || img.fileSize > imgSize){
alert("当前文件大小" + img.fileSize / 1024 + "KB, 超出最大限制 " + imgSize / 1024 + "KB");
}else{
alert("OK");
return true;
}
}
}
img.src = val;
}else{
alert("请选择上传的文件!");
return false;
}
}
</script>
<input type="file" id="fuPhoto" />
<input type="submit" value="上传" onclick="return checkImgSize()" />
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head><body>
<script type="text/javascript">
var imgSize = 1024 * 100; //最大100K
function checkImgSize(){
var file = document.getElementById("fuPhoto");
if(file.value != ""){
//检测类型
var val = file.value;
if(/^.*?\.(gif|png|jpg|JPG|JPEG|jpeg|bmp)$/.test(val)){
}else{
alert("只能上传gif, png, jpg, bmp格式的图片");
return false;
}
var img = new Image();
img.onreadystatechange = function(){
if(img.readyState == "complete"){
if(img.fileSize <=0 || img.fileSize > imgSize){
alert("当前文件大小" + img.fileSize / 1024 + "KB, 超出最大限制 " + imgSize / 1024 + "KB");
}else{
alert("OK");
return true;
}
}
}
img.src = val;
}else{
alert("请选择上传的文件!");
return false;
}
}
</script>
<input type="file" id="fuPhoto" />
<input type="submit" value="上传" onclick="return checkImgSize()" />
</body>
</html>
在IE 下有效果,到firefox 下不支持这个了.
IE,firefox 下Image 都支持onload
所以你可以替换成 img.onload=function(){}
在还有fileSize 只对IE 有效,firefox 下无效的
在IE 下有效果,到firefox 下不支持这个了.
IE,firefox 下Image 都支持onload
所以你可以替换成 img.onload=function(){}
在还有fileSize 只对IE 有效,firefox 下无效的
参考一下
对ASP.NET和C#有兴趣的朋友，欢迎加入67226009
关注
http://www.51aspx.com/CV/163FileUpload/
myImage.onload = function(){
alert(fileSize);
if(myImage.width>0 && myImage.height>0){
if (myImage.fileSize > 2048*1024){
alert("照片不得大于2M");
}else{
//上传操作
}
}
}
if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
//Firefox浏览器
myImage.src=document.forms[0].imgUpload.files[0].getAsDataURL();
//其中forms是指文件所在的表单，而imgUpload是指type='file'的id号，由此可以得到路径。
} else{
myImage.src = Dom.get("imgUpload").value;
}但是这里面有潜在的两个问题，就是本地文件路径的中文问题，还有一个就是在fierefox中fileSize是无效的，但是我试了GetFileSize也是无效的，这两个问题还在解决中。
<div class="linebox">
<form method="post" name="formImage" enctype="multipart/form-data" target="hidden_frame">
<span class="lblLabel">图片上传:</span>
<input type="file" class="imgUpload" name="imgUpload" id="imgUpload" title="浏览" />
<input type="button" id="btnUpload" onclick="uploadImage();" value="上 传"/>
<input type="button" id="btnDelete" onclick="deleteImage();" value="删 除"/>
</form>
</div>js部门代码：
var myImage =new Image();
myImage.onload = function(){
if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
fileSize=Dom.get("imgUpload").files[0].fileSize;
}else{
fileSize=myImage.fileSize
}
if(myImage.width>0 && myImage.height>0){
if (fileSize > 2048*1024){
alert("照片不得大于2M");
}else{
//上传
}
}
}
if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
//Firefox浏览器
myImage.src=document.forms[0].imgUpload.files[0].getAsDataURL();
} else{
myImage.src = Dom.get("imgUpload").value;
}
注意点：1、 myImage.src必须写在onload方法的后面。
2、document.forms[0].imgUpload.files[0].getAsDataURL()这个路径不会有问题，即使路径带有中文也可以解决。