javascript
编写手机端自适应页面案例，springMVC代码，SpringMVC上传代码，去掉input框中原有的样式，使ios按钮没有圆角,css中的border-radius类似
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>
<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>
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;
?}
}
總結
以上是生活随笔為你收集整理的编写手机端自适应页面案例，springMVC代码，SpringMVC上传代码，去掉input框中原有的样式，使ios按钮没有圆角,css中的border-radius类似的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 瑞赛乐吃了可以变年轻吗？
- 下一篇： 为什么吃柿子会牙疼？