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后台实现
上一篇:
IDEA上Java项目控制台中文乱码