手机端上传图片及java后台接收和ajaxForm提交
有很多微信开发的项目在手机端需要传图片，但是又不想调用微信的上传图片接口，于是采取了如下做法：
使用ajaxForm提交文件所需js：jquery.form.js
页面代码：
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@include file="/context/mytags.jsp"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>页面标题</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.
">
<link rel="stylesheet" href="${contextPath}/plug-in/distribution/lib/weui.min.css">
<link rel="stylesheet" href="${contextPath}/plug-in/distribution/css/jquery-weui.css">
<link rel="stylesheet" href="${contextPath}/plug-in/distribution/css/style.css">
<style type="text/css">
.file {
position: relative;
display: inline-block;
background: #D0EEFF;
border: 1px solid #99D3F5;
border-radius: 4px;
padding: 4px 12px;
overflow: hidden;
color: #1E88C7;
text-decoration: none;
text-indent: 0;
line-height: 20px;
}
.file input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
}
.file:hover {
background: #AADFFD;
border-color: #78C3F3;
color: #004974;
text-decoration: none;
}
</style>
<script>
$(document).ready(function(){
});
</script>
</head>
<body ontouchstart onload="addressList();">
<!--主体-->
<header class="wy-header">
<a href="#" onClick="javascript :history.back(-1);"><div class="wy-header-icon-back"><span></span></div></a>
<div class="wy-header-title">资料上传</div>
</header>
<div class="weui-content">
<form id="imageForm" name="imageForm" action="${webRoot}/agentPicController.do?doAdd" method="post" enctype="multipart/form-data">
<input type="hidden" name="agentId" id="agentId" value="${agent.id}" />
<div style="width:100%;height:80px;">
<span style="float: left;"> <font size="4" color="blue">我的收款码：</font></span><br/>
<input style="height:30px;" class="file" type="file" name="agentCollectionCodes" id="agentCollectionCodes" accept="image/*"/>
<div id="agentCollectionCodess" align="center"></div>
</div>
<div style="width:100%;height:80px;">
<span style="float: left;"> <font size="4" color="blue">我的身份证：</font></span><br/>
<input style="height:30px;" type="file" class="file" name="agentIdentitys" id="agentIdentitys" accept="image/*"/>
<div id="agentIdentityss" align="center"></div>
</div> <div class="weui-btn-area"><input id="buttonAdd" class="weui-btn weui-btn_primary" type="button" value="提交图片"/></div> </form>
</div> <jsp:include page="loading.jsp"></jsp:include>
<jsp:include page="footer.jsp"></jsp:include>
<jsp:include page="shareinfo.jsp"></jsp:include>
<script src="${contextPath}/plug-in/distribution/lib/jquery-2.1.4.js"></script>
<script src="${contextPath}/plug-in/distribution/lib/fastclick.js"></script>
<script type="text/javascript" src="${contextPath}/plug-in/distribution/js/jquery.Spinner.js"></script>
<script type="text/javascript" src="${contextPath}/plug-in/distribution/js/jquery.form.js"></script> <script>
var AllImgExt=".jpg|.jpeg|.gif|.bmp|.png|"//全部图片格式类型 $(function() {
FastClick.attach(document.body);
});
$("#buttonAdd").click(function() {
//身份证
var agentIdentitys = $("#agentIdentitys").val();
if (agentIdentitys==null||agentIdentitys=="") {
$.alert("请上传身份证图片","温馨提示");
return false;
}else{
//如果图片文件，则进行图片信息处理
var FileExt=agentIdentitys.substr(agentIdentitys.lastIndexOf(".")).toLowerCase();
if(AllImgExt.indexOf(FileExt+"|")==-1){
$.alert("该文件类型不允许上传。请上传"+AllImgExt+"类型的文件，\n当前文件类型为"+FileExt,"温馨提示");
return false;
}
}
//收款码
var agentCollectionCodes = $("#agentCollectionCodes").val();
if (agentCollectionCodes==null||agentCollectionCodes=="") {
$.alert("请上传收款码图片","温馨提示");
return false;
}else{
//如果图片文件，则进行图片信息处理
var FileExt=agentCollectionCodes.substr(agentCollectionCodes.lastIndexOf(".")).toLowerCase();
if(AllImgExt.indexOf(FileExt+"|")==-1){
$.alert("该文件类型不允许上传。请上传"+AllImgExt+"类型的文件，\n当前文件类型为"+FileExt,"温馨提示");
return false;
}
}
$("#loading").show();
var form = $("#imageForm");
var options = {
url:'${webRoot}/agentPicController.do?doAdd',
type:'post',
data:$('#imageForm').serialize(),
success:function(data)
{
window.location.href="${webRoot}/mpweixin/uploadImages.do";
//$("#loading").hide();
}
};
form.ajaxSubmit(options);
});
</script>
<script src="${contextPath}/plug-in/distribution/js/jquery-weui.js"></script>
</body>
</html>
java代码：
/**
* 添加图片
*
* @param ids
* @return
* @throws FileUploadException
*/
@RequestMapping(params = "doAdd")
@ResponseBody
public AjaxJson doAdd(AgentPicEntity agentPic, HttpServletRequest request) throws Exception {
String message = null;
AgentPicEntity agentpic = systemService.findUniqueByProperty(AgentPicEntity.class, "agentId", agentPic.getAgentId());
if (agentpic==null) {
agentpic = new AgentPicEntity();
}
agentpic.setAgentId(agentPic.getAgentId());
//身份证
String agentIdentity = "agentIdentity";
//付款码
String agentCollectionCode = "agentCollectionCode";
AjaxJson j = new AjaxJson();
MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
//解析request，将结果放置在list中
Map<String, List<MultipartFile>> fileMap = multiRequest.getMultiFileMap();
// 获取实体类的所有属性，返回Field数组
Field[] field = agentpic.getClass().getDeclaredFields();
// 遍历所有属性
for (int i = 0; i < field.length; i++) {
// 获取属性的名字
String name = field[i].getName();
//身份证或付款码
if (agentIdentity.equals(name)||agentCollectionCode.equals(name)) {
List<MultipartFile> files = fileMap.get(name+"s");
MultipartFile file = files.get(0);
if (!file.isEmpty()) {
// 文件保存路径
String filePath = request.getSession().getServletContext().getRealPath("/") + "upload/agentpic/"+ file.getOriginalFilename();
// 转存文件
file.transferTo(new File(filePath)); // 将属性的首字符大写，方便构造get，set方法
name = name.substring(0, 1).toUpperCase() + name.substring(1);
// 获取属性的类型
String type = field[i].getGenericType().toString();
if (type.equals("class java.lang.String")) {
//拼装setter方法
Method set = agentpic.getClass().getMethod("set"+name,String.class);
//调用setter方法
set.invoke(agentpic,"upload/agentpic/"+ file.getOriginalFilename());
}
}
}
}
message = "图片添加成功";
try{
agentPicService.saveOrUpdate(agentpic);
}catch(Exception e){
e.printStackTrace();
message = "图片添加失败";
throw new BusinessException(e.getMessage());
}
j.setMsg(message);
return j;
}
手机端上传图片及java后台接收和ajaxForm提交的更多相关文章
- Ireport5.0.1 从java后台接收list集合
作为ireport新手,开始使用时总有很多问题,说一下今天解决的一个问题,就是怎样从java后台接收list集合并显示出列表. 1.首先要在主dataset中的Paramerters 中创建参数lis ...
- base64编码上传图片java后台接收实例
原文地址:http://blog.csdn.net/tonyfreak/article/details/72522855 思路 前台传以data:image/jpeg;base64,开头的base64 ...
- angular的$http.post()提交数据到Java后台接收不到参数值问题的解决方法
本文地址:http://www.cnblogs.com/jying/p/6733408.html 转载请注明出处: 写此文的背景:在工作学习使用angular的$http.post()提交数据时, ...
- 安卓发送图片文字，java后台接收
安卓使用retrofit2 和rxjava2 url: @Multipart @POST(UrlTools.STORYUPLOAD) Observable<Result> saveRepo ...
- java后台接收json数据，报错com.alibaba.fastjson.JSONObject cannot be cast to xxx
从前台接收json封装的list数据,在后台接收时一直报错,com.alibaba.fastjson.JSONObject cannot be cast to xxx, 使用这种方式接收可以接收 @R ...
- js前台传数组，java后台接收转list，前后台用正则校验
前台,传参数时,将数组对象转换成json串,后台java收到后用 JSONArray.fromObject 转成集合. 前台js:var params = {"FileNameList&qu ...
- andrid 上传图片 asp.net 后台接收并保存
android 端代码 package com.example.uploadfile; import java.io.DataOutputStream; import java.io.File; im ...
- 前台页面上传data image图片,java后台接收图片保存
最近在项目中有这么一个需求,就是上传一个视频文件,然后要获取视频文件的第一帧图片,这个可以通过canvas获取得到,得到的是一个dataURL,之后还要将这个图片上传到云,这个时候如何操作就不清楚了, ...
- java后台接收微信服务号/订阅号消息
1.申请订阅号(适合个人)或者服务号(适合企业) 微信公众平台 2.填写配置 服务器地址: 需要接收消息 的服务端接口地址 令牌:通话识别码,随便写,后端接收时,使用一样的就可以了. 消息加密秘钥 : ...
随机推荐
- RS错误RSV-VAL-0032之项目未在布局中引用的3种解决办法
如下图所示,我用RS新建了一个空白页面,拖入了一个列表,给该列表新建了一个条件样式 条件样式如下所示,表达式来自查询1 运行,报错如下图所示 原因就是条件样式使用到了查询1中的数据项1但是数据项1在报 ...
- 1-2Html与CSS的关系
Html和CSS的关系 基于微信的后台开发须要掌握的基础知识包括有:HTML.CSS.JavaScript语言. 以下我们就来了解下这三门技术都是用来实现什么的: 1. HTML是网页内容的载体.内容 ...
- IMA文件如何打开，winimage使用方
一般先用UltraISO打开一个系统的镜像文件(.iso).其中有些文件(尤其是.ima,img)比如下面雨林木风Ghost系统盘的这个IMA文件,我们先提取到桌面 用WinImage打开这个文件即可 ...
- PHP高级教程-高级过滤器
PHP 高级过滤器 检测一个数字是否在一个范围内 以下实例使用了 filter_var() 函数来检测一个 INT 型的变量是否在 1 到 200 内: 实例 <?php $int = 122; ...
- PHP高级教程-邮件
PHP 发送电子邮件 PHP 允许您从脚本直接发送电子邮件. PHP mail() 函数 PHP mail() 函数用于从脚本中发送电子邮件. 语法 mail(to,subject,message,h ...
- top level element is not completed
今天在使用IDEA配置springmvc文件时,出现类似在Android studio 中样式文件报top level element is not completed错,郁闷极了,找了好久 才找到解 ...
- oracle 插入表数据的4种方式
1.往表中插入一整行数据 /*方法一*/ INSERT INTO 表名 VALUES(val1,val2,val3,...); /*方法二*/ '; 如: ,, FROM DUAL; 注意: 2. ...
- 基于CUDA的粒子系统的实现
基于CUDA的粒子系统的实现 用途: 这篇文章作为代码实现的先导手册,以全局的方式概览一下粒子系统的实现大纲. 科普: 对粒子进行模拟有两种基本方法: Eulerian(grid-based) met ...
- HTTP所承载的货物（图像、文本、软件等）要满足的条件
HTTP所承载的货物(图像.文本.软件等)要满足的条件: •可以被正确识别 通过Content-Type 首部说明媒体格式,Content-Language 说明语言,以便浏览器和其他客户端能正确处理 ...
- python中的多态
# -*- coding: cp936 -*- #python 27 #xiaodeng #python中的多态 #多态:一个操作的意义取决于被操作对象的类型,相同的消息给予不同的对象会引发不同的动作 ...