编写手机端自适应页面案例，springMVC代码，SpringMVC上传代码，去掉input框中原有的样式，使ios按钮没有圆角,css中的border-radius类似...

xiaoxiao2023-08-23 159

1、编写的页面

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no"> <title>XXX</title> <script type="text/javascript" src="<c:url value="/resources/cartoon2/js/jquery-1.7.2.min.js"/>"></script> <script type="text/javascript" src="<c:url value="/resources/js/jquery.js"/>"></script> <script language="javascript" type="text/javascript" src="<c:url value="/resources/js/jquery-2.1.1.js"/>"></script> <script type='text/javascript' src='<c:url value="/resources/js/jquery.validate.min.js"/>'></script> <script type='text/javascript' src='<c:url value="/resources/js/jquery.validate.cn.js"/>'></script> <script type='text/javascript' src='<c:url value="/resources/jqueryform/2.8/jquery.form.js"/>'></script> <script type='text/javascript' src='<c:url value="/resources/js/jquery.validate.js"/>'></script> <script type='text/javascript' src='<c:url value="/resources/upload/jQuery-File-Upload/js/vendor/jquery.ui.widget.js"/>'></script> <script type='text/javascript' src='<c:url value="/resources/upload/jQuery-File-Upload/js/jquery.iframe-transport.js"/>'></script> <script type='text/javascript' src='<c:url value="/resources/upload/jQuery-File-Upload/js/jquery.fileupload.js"/>'></script> <script type='text/javascript'> $(function(){ var basePath = "${pageContext.request.contextPath}"; $('#upload').fileupload({ dataType : 'json', // autoUpload: true, url : "/report/createReport", done : function(e, data) { $.each(data.result,function(index, file) { if (index == 'filedesc') { var _path = file.filepath + '/' + file.filename; $('#posterUrl').val(_path); $('#imgfileName').val(file.filename); } else if(index == "suffixError") { alert(file); } }); }, }); $("#upimgid").click(function() { //alert("test"); $("#upload").trigger('click'); }); $("#reportButton").click(function(){ var flag = true; //获取标题信息 var title = $("#title").val(); //获取描述信息 var description = $("#description").val(); //获取图片路径 var image = $("#posterUrl").val(); //获取名称 var name = $("#name").val(); //获取联系方式 var contact = $("#contact").val(); if(title == "") { $("#title").attr("placeholder","标题不能为空!"); flag = false; } if(image == "") { $("#posterUrl").attr("placeholder","图片不能为空!"); flag = false; } if(description == "") { $("#description").attr("placeholder","描述信息不能为空!"); $("#imgfileName").attr("placeholder","描述信息不能为空!"); flag = false; } if(flag == true) { jQuery.ajax({ type : 'POST', url : basePath + "/report/createReport", data : { "title" : title, "description" : description, "name" : name, "contact" : contact, "image":image }, dataType : 'json', success : function(data) { console.log(data); if(data.result == "success") { $("#title").val(""); $("#posterUrl").val(""); $("#description").val(""); $("#posterUrl").val(""); $("#imgfileName").val(""); $("#name").val(""); $("#contact").val(""); alert("信息提交成功!"); //window.opener=null; window.close(); } else if(data.result == "fail") { alert("对不起，信息提交失败!"); } }, error : function() { alert("网络或者其他原因出错!"); } }); } }); }); </script> <style type="text/css"> body,html *{ margin:0px; padding:0px; } #report-header{ color:#fff; font-weight:900; height:3em; line-height:3em; padding-left:2.8em; background:RGB(0,171,240) url("../resources/report/icon.gif") no-repeat 1.2em 0.9em !important; margin-bottom:1.6em; } #report-form { text-align:center; padding-left:3%; } #report-form table { width:94%; text-align:center; } #report-form table tr td,#report-form table tr td input,#report-form table .field-name,#report-form #star{ height:25px; line-height:25x; vertical-align: middle; } #report-form table .field-name{ text-align:left; font-weight:800; color:#888888; width:24%; vertical-align:top; } #report-form table input,#report-form table textarea { border-width: 1px; border-style:solid;-moz-border-radius:3px; -khtml-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; border-color:#bbbbbb; -moz-border-color:#bbbbbb; color:#888888; outline-style:none; width:98%; font-size:16px; }input {-webkit-appearance:none;} input[type="submit"],input[type="reset"],input[type="button"],input{-webkit-appearance:none;}#report-form table .field-input { text-align:left; } #report-form table .field-name .character{ margin-right:0.3em; } #report-form table #imgfileName { width:87%; float:left; border-bottom-right-radius:0px; border-top-right-radius:0px; } #report-form table #upimgid{ width:10%; float:left; color:#888888; height:27px; border-left:0px; border-bottom-left-radius:0px; border-top-left-radius:0px; } #report-form #star{ color:red; } #report-form #reportButton{ width:100%; text-align:center; color:#fff; height:40px; font-weight:900; vertical-align:middle; background:RGB(0,171,240) !important; } </style> </head> <body> <div id="report-header"> 问题反映 </div> <div id="report-form"> <form action="" method="post" enctype="multipart/form-data"> <table> <tr> <td class="field-name"><label class="character">标题</label><label id="star">*</label></td> <td class="field-input" style="padding-bottom:25px;"> <input type="text" name="title" id="title"/> </td> </tr> <tr> <td class="field-name"><label class="character">描述</label><label id="star">*</label></td> <td class="field-input" style="padding-bottom:25px;"> <textarea rows="4" name="description" id="description"></textarea> </td> </tr> <tr> <td class="field-name"><label class="character">图片</label><label id="star">*</label></td> <td class="field-input" style="padding-bottom:25px;"> <c:url value="/report/upLoadZipNormal" var="fileUploadUrl" /> <input id="upload" type="file" name="file" data-url="${fileUploadUrl}" multiple style="opacity: 0; filter: alpha(opacity :0); display: none;" /> <input id="posterUrl" name="posterUrl" type="hidden"/> <input id="imgfileName" name="imgfileName" type="text" /> <input type="button" id="upimgid" value="+"/> </td> </tr> <tr> <td class="field-name">姓名</td> <td class="field-input" style="padding-bottom:25px;"> <input type="text" name="name" id="name"/> </td> </tr> <tr> <td class="field-name">联系方式</td> <td class="field-input" style="padding-bottom:35px;"> <textarea rows="2" name="contact" id="contact"></textarea> </td> </tr> <tr class="button-tr"> <td colspan="2" id="reportButton" id="reportButton"> 提交 </td> </tr> </table> </form> </div> </body> </html> <title>全国政府网站普查</title> <script type="text/javascript" src="<c:url value="/resources/cartoon2/js/jquery-1.7.2.min.js"/>"></script> <script type="text/javascript" src="<c:url value="/resources/js/jquery.js"/>"></script> <script language="javascript" type="text/javascript" src="<c:url value="/resources/js/jquery-2.1.1.js"/>"></script>

done : function(e, data) { $.each(data.result,function(index, file) { if (index == 'filedesc') { var _path = file.filepath + '/' + file.filename; $('#posterUrl').val(_path); $('#imgfileName').val(file.filename); } else if(index == "suffixError") { alert(file); } }); }, }); $("#upimgid").click(function() { //alert("test"); $("#upload").trigger('click'); }); $("#reportButton").click(function(){ var flag = true;

//获取标题信息 var title = $("#title").val(); //获取描述信息 var description = $("#description").val(); //获取图片路径 var image = $("#posterUrl").val(); //获取名称 var name = $("#name").val(); //获取联系方式 var contact = $("#contact").val();

if(title == "") { $("#title").attr("placeholder","标题不能为空!"); flag = false; } if(image == "") { $("#posterUrl").attr("placeholder","图片不能为空!"); flag = false; } if(description == "") { $("#description").attr("placeholder","描述信息不能为空!"); $("#imgfileName").attr("placeholder","描述信息不能为空!"); flag = false; }

if(flag == true) { jQuery.ajax({ type : 'POST', url : basePath + "/report/createReport", data : { "title" : title, "description" : description, "name" : name, "contact" : contact, "image":image }, dataType : 'json', success : function(data) { console.log(data); if(data.result == "success") { $("#title").val(""); $("#posterUrl").val(""); $("#description").val(""); $("#posterUrl").val(""); $("#imgfileName").val(""); $("#name").val(""); $("#contact").val(""); alert("信息提交成功!"); //window.opener=null; window.close(); } else if(data.result == "fail") { alert("对不起，信息提交失败!"); } }, error : function() { alert("网络或者其他原因出错!"); } }); } }); });

</script> <style type="text/css"> body,html *{ margin:0px; padding:0px; } #report-header{ color:#fff; font-weight:900; height:3em; line-height:3em; padding-left:2.8em; background:RGB(0,171,240) url("../resources/report/icon.gif") no-repeat 1.2em 0.9em !important; margin-bottom:1.6em; } #report-form { text-align:center; padding-left:3%; } #report-form table { width:94%; text-align:center; } #report-form table tr td,#report-form table tr td input,#report-form table .field-name,#report-form #star{ height:25px; line-height:25x; vertical-align: middle; }

#report-form table .field-name{ text-align:left; font-weight:800; color:#888888; width:24%; vertical-align:top; } #report-form table input,#report-form table textarea { border-width: 1px; border-style:solid; -moz-border-radius:3px; -khtml-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; border-color:#bbbbbb; -moz-border-color:#bbbbbb; color:#888888; outline-style:none; width:98%; font-size:16px; } input {-webkit-appearance:none;} input[type="submit"],input[type="reset"],input[type="button"],input{-webkit-appearance:none;} #report-form table .field-input { text-align:left; } #report-form table .field-name .character{ margin-right:0.3em; } #report-form table #imgfileName { width:87%; float:left; border-bottom-right-radius:0px; border-top-right-radius:0px; } #report-form table #upimgid{ width:10%; float:left; color:#888888; height:27px; border-left:0px; border-bottom-left-radius:0px; border-top-left-radius:0px; } #report-form #star{ color:red; } #report-form #reportButton{ width:100%; text-align:center; color:#fff; height:40px; font-weight:900; vertical-align:middle; background:RGB(0,171,240) !important; } </style> </head> <body> <div id="report-header"> 问题反映 </div> <div id="report-form"> <form action="" method="post" enctype="multipart/form-data"> <table> <tr> <td class="field-name"><label class="character">标题</label><label id="star">*</label></td> <td class="field-input" style="padding-bottom:25px;"> <input type="text" name="title" id="title"/> </td> </tr> <tr> <td class="field-name"><label class="character">描述</label><label id="star">*</label></td> <td class="field-input" style="padding-bottom:25px;"> <textarea rows="4" name="description" id="description"></textarea> </td> </tr> <tr> <td class="field-name"><label class="character">图片</label><label id="star">*</label></td> <td class="field-input" style="padding-bottom:25px;"> <c:url value="/report/upLoadZipNormal" var="fileUploadUrl" /> <input id="upload" type="file" name="file" data-url="${fileUploadUrl}" multiple style="opacity: 0; filter: alpha(opacity :0); display: none;" /> <input id="posterUrl" name="posterUrl" type="hidden"/> <input id="imgfileName" name="imgfileName" type="text" /> <input type="button" id="upimgid" value="+"/> </td> </tr> <tr> <td class="field-name">姓名</td> <td class="field-input" style="padding-bottom:25px;"> <input type="text" name="name" id="name"/> </td> </tr> <tr> <td class="field-name">联系方式</td> <td class="field-input" style="padding-bottom:35px;"> <textarea rows="2" name="contact" id="contact"></textarea> </td> </tr> <tr class="button-tr"> <td colspan="2" id="reportButton" id="reportButton"> 提交 </td> </tr> </table> </form> </div> </body> </html>

2.SpringMVC

package com.report.controller;

import java.io.InputStream; import java.util.HashMap; import java.util.Map;

import javax.servlet.http.HttpServletRequest;

import org.apache.log4j.Logger; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.multipart.MultipartFile;

import com.report.common.CommonVar; import com.report.entity.Affix; import com.report.entity.Report; import com.report.service.IReportService; import com.report.utils.FileUtils;

@Controller @RequestMapping(value="/report",method = { RequestMethod.GET, RequestMethod.POST }) public class ReportController { private static final Logger logger = Logger.getLogger(ReportController.class); @Autowired private IReportService reportService; //@Autowired //OperateImage operatorImage; /** * 用于跳转到报表的首页 * @return */ @RequestMapping(value = "/reportIndex") public String reportIndex(){ return "/web/report/report"; } /** * 用于创建报表用 * @return */ @RequestMapping(value = "/createReport" ,method = RequestMethod.POST, produces = "application/json") public Map<String, Object> createReport( Model model,HttpServletRequest request){ Map<String, Object> result = new HashMap<String, Object>(); result.put("result", "fail"); //获取各种参数信息 //获取标题 String title = request.getParameter("title"); //获取描述信息 String description = request.getParameter("description"); //获取图片地址 String image = request.getParameter("image"); //获取姓名 String name = request.getParameter("name"); //获取联系方式 String contact = request.getParameter("contact"); //创建一个举报实体 Report report = new Report( title, description, image, name, contact); //保存举报信息 boolean flag = reportService.createReport(report); if (flag) { result.put("result", "success"); } return result; } /*private void zoomOutImg(String saveURL) throws IOException { int ratio = operatorImage.getImgRatio(saveURL, CommonVar.LOGO_SCALE); operatorImage.reduceImageEqualProportion(saveURL, saveURL, ratio); }*/ /** * 上传到正式路径，压缩不截图 * * @param param * @param imageFile * @return */ @RequestMapping(value = "/upLoadZipNormal", method = RequestMethod.POST, produces = "application/json") public Map<String, Object> upLoadZipNormal( @RequestParam Map<String, String> param, @RequestParam("file") MultipartFile imageFile) { logger.info("-------------------"); Map<String, Object> result = new HashMap<String, Object>(); if (!imageFile.isEmpty()) { Map<String, String> filedesc = new HashMap<String, String>();

try { // 新文件名uuid形成的文件名称 String uuid = FileUtils.genFileName();

// 存放路径 String path = CommonVar.getStoreFilepath() + FileUtils.genFilePath(Affix.UGCFILE); path = path.replace("\\", "/").replace("//", "/"); // 原文件名 String srcName = imageFile.getOriginalFilename(); String suffix = srcName.substring(srcName.lastIndexOf(".") + 1,srcName.length()).toLowerCase(); if (suffix.length() != 0 && (suffix.equals("jpg")) || (suffix.equals("png"))) { // 带后缀的新文件名 String newFileName = uuid + srcName.substring(srcName.indexOf("."));

// 保存文件路径(正式文件夹下) String saveURL = path + "/" + newFileName; // 写文件 InputStream fi = imageFile.getInputStream();

FileUtils.writeFile(fi, saveURL); //等比缩图 //zoomOutImg(saveURL);

String webpath = CommonVar.getWebStoreFilepath() + FileUtils.genFilePath("3"); webpath = webpath.replace("\\", "/");

filedesc.put("id", uuid); filedesc.put("name", uuid); filedesc.put("filetype", Affix.UGCFILE); filedesc.put("contenttype", imageFile.getContentType()); filedesc.put("filename", newFileName);// 有后缀 filedesc.put("originalfilename", imageFile.getOriginalFilename()); filedesc.put("filepath", webpath);

result.put("filedesc", filedesc); } else { result.put("suffixError","文件必须为RGB模式的JPG或PNG格式!"); } //TODO 这里还要计算图片的像素大小。 } catch (Exception e) { e.printStackTrace(); } } return result; } }

最新回复(0)