编写手机端自适应页面案例，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类似的更多相关文章
- jquery photoClip支持手机端,PC端 本地裁剪图片后上传插件
支持手机,PC最好的是jquery photoClip插件,下载地址&示例:https://github.com/topoadmin/photoClip demo.html 代码: <! ...
- java免费空间！最简单的openshift免费空间上传代码教程！和FTP一样简单!
史上最简单的openshift免费空间上传代码教程!没有之一! 最近因为想弄一个免费的空间,而且最好是Java的空间,找了一大片,jsp的空间少不说,免费的更是寥寥无几. 找了一大推垃圾空间,终于让我 ...
- 前端切图:手机端自适应布局demo
手机端自适应布局demo原型如下: 图片发自简书App 要求如下:适应各种机型源码如下: <!DOCTYPE html > <html> <head> <me ...
- SpringMVC 实现文件上传与下载，并配置异常页面
目录 上传文件的表单要求 Spring MVC实现上传文件 需要导入的jar包 配置MultipartResolver解析器 编写接收上传文件的控制器 Spring MVC实现文件下载 下载文件时的h ...
- Spring(七）SpringMVC的文件上传
1-SpringMVC的请求-文件上传-客户端表单实现(应用) 表单项type="file" 表单的提交方式是post 表单的enctype属性是多部分表单形式,及enctype= ...
- SpringMVC文件的上传与下载实现
单文件上传 首先创建项目,开发工具是IDEA,选择Spring项目,勾选上Spring和SpringMVC. 然后命名,最后完成. 默认生成配置文件在web/WEB-INF下. 首先导入需要的jar包 ...
- SpringMVC的文件上传下载，异常处理，拦截器的小总结
文件的上传和下载 我们通常在访问网页时会使用到文件的上传与下载的功能,那么他是如何实现的呢? 1 下载: ResponseEntity :用于控制器方法的返回值类型,该控制器方法的返回值就是响应到浏览 ...
- 使用webstom或者idea上传代码到github或coding
鉴于github网络速度太慢,建议用coding.先介绍github上传方式,因为webstom或idea集成了github,方法简单. git是一个版本控制器,他的作用是管理代码.比如你修改了代码, ...
- SpringMVC学习--文件上传
简介 文件上传是web开发中常见的需求之一,springMVC将文件上传进行了集成,可以方便快捷的进行开发. springmvc中对多部件类型解析 在 页面form中提交enctype="m ...
随机推荐
- Linux中/etc/fstab /etc/mtab /proc/mounts这三个文件的分析与比较 分区表位置
本文主要讲解Linux中/etc/fstab /etc/mtab /proc/mounts这三个文件的作用以及不同之处. 转自http://haohaozhang.blog.51cto.com/917 ...
- Oracle10g以上sysaux表空间的维护和清理
SYSAUX表空间在Oracle 10g中引入,其作为SYSTEM表空间的辅助表空间.之前,一些使用独立表空间或系统表空间的数据库组件,现在SYSAUX表空间中存在.通过分离这些组件,减轻了SYSTE ...
- Modern Algebra 读书笔记
Modern Algebra 读书笔记 Introduction 本文是Introduction to Modern Algebra(David Joyce, Clark University)的读书 ...
- 线性表 linear_list 顺序存储结构
可以把线性表看作一串珠子 序列:指其中的元素是有序的 注意last和length变量的内在关系 注意:将元素所占的空间和表长合并为C语言的一个结构类型 静态分配的方式,分配给一个固定大小的存储空间之后 ...
- day04 Java Web 开发入门
day04 Java Web 开发入门 1. web 开发相关介绍 2. web 服务器 3. Tomcat服务器启动的问题 4. Tomcat目录结构 5. Web应用程序(虚拟目录映射,缺省web ...
- ubuntu 卸载从源码安装的 emacs
由于配置问题想卸了重装. 解压并进入你的源码所在目录: ./configure sudo make uninstall Done Reference: http://askubuntu.com/que ...
- iOS开源加密相册Agony的实现（五）
简介 虽然目前市面上有一些不错的加密相册App,但不是内置广告,就是对上传的张数有所限制.本文介绍了一个加密相册的制作过程,该加密相册将包括多密码(输入不同的密码即可访问不同的空间,可掩人耳目).Wi ...
- Docker Volume 之权限管理（一）
摘要: Volume数据卷是Docker的一个重要概念.数据卷是可供一个或多个容器使用的特殊目录,可以为容器应用存储提供有价值的特性.然而Docker数据卷的权限管理经常是非常令人困惑的.本文将结合实 ...
- Android开发之手把手教你写ButterKnife框架（三）
欢迎转载,转载请标明出处: http://blog.csdn.net/johnny901114/article/details/52672188 本文出自:[余志强的博客] 一.概述 上一篇博客讲了, ...
- Android底层开发经验
最近看到一个博客,他的博文虽然是转载的,但源作者肯定对底层的理解可谓是非常透彻,一副思维导图就可以将整个重要体系建立起来,非常适合大家学习.学习不单单只要有代码,生动有趣更重要.在此推荐一波: htt ...