java web - 限制文件的上传类型为图片类型（.gif,.png,.jpg,.jpeg）

最新推荐文章于 2025-07-03 10:31:21 发布

原创最新推荐文章于 2025-07-03 10:31:21 发布 · 1.5w 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #图片 #java web

java web 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了两种文件上传前的格式验证方法，一种使用Ajax实现即时反馈，另一种则是在表单提交前进行验证。这两种方法都能有效避免不符合格式要求的文件被上传。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.使用ajax

function insertTitle(tValue){
if(tValue!=''){
	var len = tValue.length;
	var str = tValue.substr(tValue.lastIndexOf("."),len);
	if(str=='.jpg'||str=='.JPG'||str=='.gif'||str=='.GIF'||str=='.png'||str=='.PNG'||str=='.bmp'||str=='.BMP'){
	}else{
		parent.ymPrompt.alert({title:'信息提示',message:'请选择格式为 .jpg .JPG .gif .GIF .png .PNG .bmp .BMP的附件上传！',width:350,height:200});
		return false;
	}
	var file = document.getElementById("files");
	file.select();
	document.getElementById("picDiv").focus();
	var realPath = document.selection.createRange().text;
		document.getElementById("tupianpath").value = realPath;
	}
}

相应的jsp是：

<input type="file" name="files" id="file1" style="cursor: pointer;position:absolute;filter:alpha(opacity=0);width:0;opacity: 0.0;/**" size="1"   onchange="if(this.value)insertPhoto(this.value,'1');" hidefocus/>

2.不使用ajax

function fileChange(target){  
//检测上传文件的类型 
    var ext,idx;   
    if (target == ''){  
    	ymPrompt.alert({title:'信息提示',message:'请选择需要上传的文件!',width:250,height:160});
        return; 
    } else {   
        idx = target.lastIndexOf(".");   
        if (idx != -1){   
            ext = target.substr(idx+1).toUpperCase();   
            ext = ext.toLowerCase( ); 
            if (ext!='jpg'&&ext!='png'&&ext!='jpeg'&& ext!='gif'){
                ymPrompt.alert({title:'信息提示',message:'只能上传jpg,png,jpeg,gif类型的文件!',width:250,height:160});
          		document.getElementById("yingye").innerHTML="<input   name='file' id='yingyezhizhao'  class='text_172' type=file onchange=\"fileChange(this.value);\">";   
                return;  
            }   
        } else {  
            return;
        }   
    }
}     
</script>

相应的jsp为：

<input   name='file' id='yingyezhizhao'   type=file class="text_172" onchange="fileChange(this.value);" accept=".gif,.jpg,.jpeg,.png">