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

最新推荐文章于 2021-07-25 16:28:58 发布

itfuture2012lz

最新推荐文章于 2021-07-25 16:28:58 发布

阅读量1.6k

点赞数

分类专栏： jsp页面——文件上传校验类型、大小文章标签： fileUpload中fileSize获

本文链接：https://blog.csdn.net/lv_shijun/article/details/38300929

版权

jsp页面——文件上传校验类型、大小专栏收录该内容

1 篇文章 0 订阅

订阅专栏

方式一：支持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");

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