java多张图片上传,前后台实现代码

1、页面元素,file设置了multiple,支持多张图片,样式使用bootstrap基础样式,自行引用。

<form id="form1"  method="post"  enctype="multipart/form-data" >
	 	<span>请上传图片:</span>
		<input id="files" name="files" type="file" multiple >
</form>
		   <!-- 工具栏 -->
		   <div id="toolbar" class="btn-group" style="margin-top: 20px">
	            <button id="btn_add" type="button" class="btn btn-default" onclick="savebase()">
	                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>确定
	            </button>	
	            <button id="btn_add" type="button" class="btn btn-default" onclick="window.history.back(-1) ">
	                <span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span>返回
	            </button>	         
	        </div>

2、js代码提交,前台初步验证图片格式,注意这边加载了jquery-form.js。

<script type=text/javascript src="<%=basePath%>static/js/jquery-form.js"></script> 
<script type="text/javascript">
function savebase(){
          
        
        var path1 = $("#files").val();
        //alert(path1);
        if (path1.length != 0) {
          
   
      		var extStart = path1.lastIndexOf(.),
                ext = path1.substring(extStart, path1.length).toUpperCase();
            if (ext !== .PNG && ext !== .JPG && ext !== .JPEG && ext !== .GIF) {
          
   
                alert("请上传正确的图片!");
                return false;
            }
        }else{
          
   
        	alert("请上传图片!");
                return false;
        }
		 $("#form1").ajaxSubmit({
          
   
                url: <%=basePath%>pic/b,
                beforeSubmit: function () {
          
   

                },
                success: function (data) {
          
   
                    if(data==1) {
          
   
                        window.location.href="<%=basePath%>/pic/a";
                    }else if(data==2) {
          
   
                        layer.msg(请上传正确的图片!, {
          
   
                            icon: 1,//提示的样式
                            time: 2000
                        });
                    }else if(data==3) {
          
   
                        layer.msg(请上传大小不超过20M的图片!, {
          
   
                            icon: 1,//提示的样式
                            time: 2000
                        });
                    }else if(data==4){
          
   
                   		layer.msg(提交失败,请联系管理员, {
          
   
                            icon: 1,//提示的样式
                            time: 2000
                        });
                    }
                }
            });
	}	
</script>

3、java后台实现

经验分享 程序员 微信小程序 职场和发展