关于文件上传校验时浏览器不兼容问题(结合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" οnchange="checkImgType();">
	    <input type="button" value="提交" id="uploadbutton" οnclick="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");




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值