編寫手機端自適應頁面案例，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;
}
}
相關文章
- css中四種頁面編寫樣式CSS
- 成品直播原始碼推薦，原生button按鈕css去掉預設樣式原始碼CSS
- 直播app系統原始碼，Flutter MaterialButton 實現圓角邊框按鈕APP原始碼Flutter
- 直播網站程式原始碼，給元件按鈕、文字編輯框等設定圓形邊框、顏色網站原始碼元件
- 《四 spring原始碼》手寫springmvc原始碼SpringMVC
- CSS input 文字框樣式CSS
- CSS input文字框樣式CSS
- 手機直播原始碼，突出底部導航欄中間按鈕的樣式原始碼
- textarea文字框高度自適應程式碼例項
- elementUI去掉input右邊上下按鈕UI
- SpringMVC-08-SpringMVC層編寫SpringMVC
- 小程式webview跳轉頁面後沒有返回按鈕完美解決方案WebView
- 使阿里oss實現前端程式碼自動上傳阿里前端
- HTML5頁面移動端自適應佈局的實現示例程式碼HTML
- 在模板字串裡寫css，沒有程式碼提示字串CSS
- 編寫HTML頁面常見的CSS樣式問題HTMLCSS
- CSS 文字框圓角CSS
- 這樣寫程式碼，真是帥到沒有朋友
- CSS3簡單圓角立體按鈕效果CSSS3
- ios input 鍵盤收起頁面底部有間隙沒有自動還原iOS
- 新型掩碼自編碼器 AdaMAE，自適應取樣
- input文字框寬度自適應
- css 最經典的按鈕樣式CSS
- 陪玩平臺原始碼實現類似手機懸浮按鈕，需要如何做？原始碼
- php短視訊原始碼，按鈕的圓角圖示實現PHP原始碼
- SpringMVC實現多檔案上傳原始碼SpringMVC原始碼
- css圓角矩形邊框CSS
- iOS程式碼編寫利器AppCode 2022iOSAPP
- 手寫SpringMvc概要SpringMVC
- 小程式沒有返回按鈕怎麼辦?
- react 有沒有類似vue中watch這樣的api？ReactVueAPI
- SpringMVC中JSP頁面不顯示EL表示式的原因SpringMVCJS
- WPF Button按鈕設定圓角
- 🐒編寫高質量程式碼（手撕程式碼）
- 手機直播原始碼，Flutter 中的彈簧按鈕效果原始碼Flutter
- JS面試手寫程式碼JS面試
- 下載的onethink ，手機 還是顯示網頁吧，沒有自適應網頁
- AppCode 2022 for Mac(iOS程式碼編寫利器)APPMaciOS
- CSS jquery圓角帶陰影的導航選單程式碼分享CSSjQuery