标签：java one info rap for isa onchange read proc
1.引入讲个jar包 springmvc设置
commons-fileupload-1.3.3.jar
commons-io-2.5.jar
<!-- 定义文件解释器 --> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <!-- 设置默认编码 --> <property name="defaultEncoding" value="utf-8"></property> <!-- 文件大小最大值 --> <property name="maxUploadSize" value="10485760000" /> <!-- 内存中的最大值 --> <property name="maxInMemorySize" value="40960" /> </bean>
2.HTML 对file做了css美化 点击按钮可以清空file
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>新增地名标志</title> <link rel="stylesheet" href="css/bootstrap.min.css"/> <link rel="stylesheet" href="css/bootstrap-datetimepicker.css" type="text/css"/> <script src="js/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="js/bootstrap.min.js" type="text/javascript"></script> <script src="js/bootstrap-datetimepicker.js"></script> <script src="js/bootstrap-datetimepicker.zh-CN.js"></script> <script src="js/table.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="css/style.css"> <script src="../../js/jquery.tips.js"></script> <script src="js/hint.js"></script> <style> .readonly{ background-color: rgb(242, 242, 242); } /*a upload */ .a-upload { padding: 4px 10px; height: 36px; line-height: 20px; position: relative; cursor: pointer; color: #888; background: #fafafa; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; display: inline-block; *display: inline; *zoom: 1 } .a-upload input { position: absolute; font-size: 100px; right: 0; top: 0; opacity: 0; filter: alpha(opacity=0); cursor: pointer } .a-upload:hover { color: #444; background: #eee; border-color: #ccc; text-decoration: none } .close-upimg:hover { background-color: blue; } </style> </head> <body> <form id="dmbz"> <table class="table table-bordered table-hover"> <tr> <td class="danyuange">标志文件上传</td> <td colspan="7"> <a href="javascript:;" id="a-upload"class="a-upload" style="float:left;"> <input type="file" id=‘file21‘ name="zhaopianwenjianming" onchange="showPreview(this)">点击这里上传文件 </a> <div class=fileImgDel style="height:36px;float:left;line-height: 36px;"> <span class=‘show‘ name="show" style=‘float:left;height:36px;margin-left: 10px;‘></span> <img src=‘../../img/del.png‘ class=‘close-upimg‘ id=‘close-upimg‘ onclick="delFile()" style=‘float:left;position:relative;top:10px;‘> </div> </td> </tr> </table> </form> </body> </html> <script type="text/javascript"> function showPreview(source) { $(".fileImgDel").empty(); $(".fileImgDel").append("<span class=‘show‘ name=‘show‘ style=‘float:left;height:36px;margin-left: 10px;‘></span>" +"<img src=‘../../img/del.png‘ class=‘close-upimg‘ id=‘close-upimg‘ onclick=" +"delFile()" +" style=‘float:left;position:relative;top:10px;‘>"); var arrs = $(source).val().split(‘\\‘); var filename=arrs[arrs.length-1]; $(".show").text(filename); } function delFile(){ $(".fileImgDel").empty(); document.getElementById("a-upload").innerHTML="<input type=‘file‘ id=‘file21‘ name=‘zhaopianwenjianming‘ onchange=‘showPreview(this)‘>点击这里上传文件"; $(".fileImgDel").append("<span class=‘show‘ name=‘show‘ style=‘float:left;height:36px;margin-left: 10px;‘></span>" +"<img src=‘../../img/del.png‘ class=‘close-upimg‘ id=‘close-upimg‘ onclick=" +"delFile()" +" style=‘float:left;position:relative;top:10px;‘>"); //var biaozhidaima=$("#biaozhidaima").val(); } </script>
3.ajax提交
function placeMark_Save(){ var ss2,fd; if(!!window.ActiveXObject || "ActiveXObject" in window){//判断浏览器是否为IE11 //alert(‘是IE！‘) ss2 = $("#dmbz", window.frames[‘iframe_bz‘].document); }else{ //alert(‘非IE！‘) ss2 = $("#dmbz", window.frames[‘iframe_bz‘].contentDocument); } //-----------------------------------------------------formdata if (action == "add") { fd = new FormData(ss2[0]); fd.append("id","0");//新增formdata元素 fd.append("uuid",""); fd.append("diminguuid",dmInfo.guid); fd.append("action","add"); }else{ fd = new FormData(ss2[0]); fd.append("action","edit"); fd.append("uuid",uuid_biaozhi); }
//ajax提交 $.ajax({ url: ‘placeName/biaoZhiSave.do‘, type: ‘POST‘, datatype: ‘json‘, data: fd, cache:false, traditional: true, contentType: false, processData: false, success : function(data) { if (data) { placeMarkTable_Close();// 成功后才能关闭对话框 jQuery(placeMark_Table).jqGrid(‘setGridParam‘, { url : ‘placeName/biaozhiInit.do‘ }).trigger(‘reloadGrid‘); } else { $("#markBtn").tips({ side : 1, msg : "数据保存失败!", bg : ‘#FF5080‘, time : 5 }); } } }); }
4.Controller.java文件
@RequestMapping(value = "/biaoZhiSave") public void biaoZhiSave(@RequestParam(value = "zhaopianwenjianming", required = false)MultipartFile zhaopianwenjianming, HttpServletRequest request,HttpServletResponse response) throws IllegalStateException, IOException{ String newUuid = ""; String action = request.getParameter("action");// 操作符 String fileName=request.getParameter("biaozhidaima");//标志代码---作为文件名
JSONObject jsonData=new JSONObject();//将传入的数据转为json对象 Map<String,String[]> paramMap = request.getParameterMap(); for(String name : paramMap.keySet()) { String[] values = paramMap.get(name); jsonData.put(name, StringUtils.join(values)); }
//保存图片 if (!zhaopianwenjianming.isEmpty()) {//如果有图片 //保存到服务器WEB-INF\\upload目录下 String realPath = request.getSession().getServletContext().getRealPath("/WEB-INF/upload"); String ext = FilenameUtils.getExtension(zhaopianwenjianming.getOriginalFilename());//文件后缀名 zhaopianwenjianming.transferTo(new File(realPath+"\\"+ fileName + "." + ext)); jsonData.put("zhaopianwenjianming",fileName + "." + ext); //保存文件到D:\\upload目录下 /* String ext = FilenameUtils.getExtension(zhaopianwenjianming.getOriginalFilename());//文件后缀名 zhaopianwenjianming.transferTo(new File("D:\\upload\\" + fileName + "." + ext)); jsonData.put("zhaopianwenjianming",fileName + "." + ext);*/ } }
ajax提交formData iframe springmvc 上传文件 页面是通过iframe嵌入的html
标签：java one info rap for isa onchange read proc
原文地址：https://www.cnblogs.com/chimo123/p/9087305.html
