关于文件上传校验时浏览器不兼容问题（结合struts1+spring+hibernate）

方式一：支持goole、firefox、IE6版本，IE6以上版本需要对浏览器进行安全设置，否则会出现js错误：“Automation 服务器不能创建对象”具体设置如下：

第一步:浏览器-->工具-->Internet选项-->安全-->Internet的自定义级别-->安全级别设为"中",启用"对没有标记为安全的ActiveX控件进行初始化和脚本运行"

第二步:接第一步选择"受信任的站点"-->站点-->去掉要求进行"服务器验证(https:)"前面的勾,然后添加运行上面js代码的站点到受信任的区域，例如:http://localhost另外:如果用户遇到不能修改IE中Internet选项的安全级别时，解决方法是先打开注册表编辑器,

找到"HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\InternetSettings\Zones\3"分支,在右侧窗口中将"MinLevel"修改为"10000"(十六进制)后就可以在IE属性中设置较低的安全级别了。

js如下：

var maxsize = 2*1024*1024;//2M
var errMsg = "上传的附件文件不能超过2M！！！";
var tipMsg = "您的浏览器暂不支持计算上传文件的大小，确保上传文件不要超过2M，建议使用IE、FireFox、Chrome浏览器。";
var browserCfg = {};
var ua = window.navigator.userAgent;
if (ua.indexOf("MSIE")>=1){
browserCfg.ie = true;
}else if(ua.indexOf("Firefox")>=1){
browserCfg.firefox = true;
}else if(ua.indexOf("Chrome")>=1){
browserCfg.chrome = true;
}
/**
*文件上传校验
*/
function checkform(){
var obj_file = document.getElementById("theFile");
if(obj_file.value==""){
alert("请先选择上传文件");
return;
}
var filesize = 0;
if(browserCfg.firefox || browserCfg.chrome ){
filesize = obj_file.files[0].size;
//alert(filesize+"=======firefox and chrome");
}else if(browserCfg.ie){
var filePath = obj_file.value;
var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
var file = fileSystem.GetFile (filePath);
filesize = file.Size;
//alert(filesize);
}else{
alert(tipMsg);
//提交按钮置灰
document.getElementById("uploadbutton").setAttribute("disabled","disabled");
//验证不通过的图片为默认图片
document.getElementById("defaultImg").setAttribute("src","ccmbam/images/nopic.jpg");
return;
}
if(filesize==-1){
alert(tipMsg);
document.getElementById("uploadbutton").setAttribute("disabled","disabled");
document.getElementById("defaultImg").setAttribute("src","ccmbam/images/nopic.jpg");
return;
}else if(filesize>maxsize){
alert(errMsg);
document.getElementById("uploadbutton").setAttribute("disabled","disabled");
document.getElementById("defaultImg").setAttribute("src","ccmbam/images/nopic.jpg");
return false;
}else{
//alert("文件大小符合要求");
//提交按钮恢复正常可点击状态
var obj = {name:'disabled'};
if("name" in obj){
document.getElementById("uploadbutton").removeAttribute("disabled");
}
}
}

<pre name="code" class="javascript">       /**
*文件上传提交
*/
function tijiaoImg(){
var uploadform = $("#mainform");
var uploadimg = $("#defaultImg");
uploadform.ajaxSubmit({
type: 'post',
dataType:"json",
url: "upload-submit.do?queryParam=Successful&flag=ajaxsubmit" ,
success: function(data){
if(data.picurl!=null){
uploadimg.attr("src" ,data.picurl);
$("#pictureUrl").val(uploadimg.attr('src'));
}
}
});
}

jsp页面：

<input type="hidden" name="pictureUrl" id="pictureUrl" value="${Content.pictureUrl}" />
<c:if test="${Content.pictureUrl!=null && Content.pictureUrl!=''}">
<img src="${Content.pictureUrl}" width="110" height="80" id="defaultImg">
</c:if>
<c:if test="${Content.pictureUrl=='' || Content.pictureUrl==null}">
<img src="ccmbam/images/nopic.jpg" width="110" height="80" id="defaultImg">
</c:if>
<input type="file" name="theFile" id="theFile" onchange="checkImgType();">
<input type="button" value="提交" id="uploadbutton" onclick="tijiaoImg()"/>

方式二：jQuery 方式（包括校验文件格式）

function checkImgType(){
var filepath=$("#theFile").val();
var this_ = document.getElementById("theFile");
//判断文件格式
var extStart=filepath.lastIndexOf(".");
var ext=filepath.substring(extStart,filepath.length).toUpperCase();
if(ext!=".PNG"&&ext!=".GIF"&&ext!=".JPG"){
alert("文件格式不正确，请上传文件后缀为png,gif,jpg的图片格式！");
$("#theFile").focus();
if ( $.browser.msie) {  //判断浏览器
//this_.select();
//document.execCommand("delete");
$("#uploadbutton").attr("disabled","disabled");
}else{
$("#theFile").val("");
}
return false;
}
//校验文件大小
var file_size = 0;
if ( $.browser.msie) {
var img=new Image();
var maxfilesize = 2*1024*1024;
img.onreadystatechange = function(){
if(img.readyState == "complete"){
file_size = img.fileSize;
if(file_size > maxfilesize){
alert("图片大于2M!");
$("#theFile").focus();
$("#uploadbutton").attr("disabled","disabled");
return false;
}else{
$("#uploadbutton").removeAttr("disabled");
return true;
}
}
}
img.src=filepath;//由于IE浏览器的异步，为了避免拿不到值，最好是在完全加载完毕后再对其路径赋值
} else {
file_size = this_.files[0].size;   //获取的是bit字节数
console.log(file_size/1024/1024 + " MB"); //前台debug打印
var size = file_size / (1024*1024);
if(size > 2){
alert("上传的文件大小不能超过2M！");
$("#theFile").focus();
$("#theFile").val("");
$("#uploadbutton").attr("disabled","disabled");
return false ;
}else{
$("#uploadbutton").removeAttr("disabled");
}
}
return true;
}

需要注意的是：

一、获取文件对象obj_file的方式不同，值也不同： document.getElementById("theFile")与$("#theFile")取值并不相同

基本js拿到的是htmlInputElement，而通过jQuery方式得到的是Object对象（其实是数组对象），所以$("#theFile")[0]与document.getElementById("theFile")相同

二、获取文件大小：obj_file.files[0].size;

三、前台控制台打印方式：console.log(字符串);

四、获取浏览器对象方式：

js：ua=window.navigator.userAgent; ua.indexOf("MSIE");//IE、ua.indexOf("Firefox");//火狐、ua.indexOf("Chrome");//谷歌，判断值不为“-1”即可

jQuery：$.browser.msie（IE）、$.browser.mozilla（火狐）、$.browser.WebKit（谷歌）

五、将按钮变为不可点击状态，赋值方式两种

js：document.getElementById("uploadbutton").setAttribute("disabled","disabled");

jQuery：$("#uploadbutton").attr("disabled","disabled");

六：按钮恢复可点击状态，移除属性值

js：document.getElementById("uploadbutton").removeAttribute("disabled");

jQuery：$("#uploadbutton").removeAttr("disabled");