图片上传及登录跳转不同页面功能实现简述

最近在工作项目中做了两个小功能，故写此文以简述之。
1.图片上传

前端使用的是jQuery的ajaxFileUpload插件进行图片的上传。此函数有我写有两个参数，第一个是上传图片的input id，一个是接收图片的input id。

function ajaxFileUpload(file_id, img_id) {
//alert(file_id+"--"+img_id);
lodingShow()
jQuery.ajaxFileUpload({
type:"POST",
url : '${ctx}/zongscfwx/upload/fileUpload', //用于文件上传的服务器端请求地址
secureuri : false, //是否需要安全协议，一般设置为false
fileElementId : file_id, //文件上传域的ID
dataType : 'json', //返回值类型 一般设置为json
success : function(data, status){//服务器成功响应处理函数

var url = jQuery("#"+img_id).val();
if(data.url != ""){
string.push(data.url);
}
lodingHide();
var urll = "";
for(var i = 0;i < string.length;i++){
if(string[i] != null)
urll = urll + string[i] + ",";
}
$("#"+img_id).val(urll);
},

error : function(data, status, e){
console.log("error");
console.log("1error="+e);
}
});
return false;
}

如此写法可将本地的图片上传到你的服务器上，并返回其url，之后依照后端逻辑将其存到相应数据库中，便可在其他功能中将图片进行取出展示。

而后端则需在控制器中写一个方法，来进行图片上传过程中的验证处理等操作。首先从session中获取到文件的保存路径，再以一个map定义好可文件上传的扩展名。之后验证上传的文件是否为空，文件名是否为空，否则抛出异常。之后检查文件大小，检查扩展名，而后可以开始上传图片，这边用到了一个别人写好的文件上传工具类。记住应当将文件服务器路径改成你自己的。

public Map<String, Object> fileUpload(HttpServletRequest request, HttpServletResponse response, String dirs)
throws Exception {
// 文件保存目录路径
String savePath = request.getSession().getServletContext().getRealPath("/zongs/attached/");

// 定义允许上传的文件扩展名
HashMap<String, String> extMap = new HashMap<String, String>();
extMap.put("image",
"gif,jpg,jpeg,png,bmp,swf,flv,swf,flv,mp3,mp4,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb,doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2");
// extMap.put("image", "gif,jpg,jpeg,png,bmp");
extMap.put("flash", "swf,flv");
extMap.put("media", "swf,flv,mp3,mp4,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb");
extMap.put("file", "doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2");

response.setContentType("text/html; charset=UTF-8");

if (!ServletFileUpload.isMultipartContent(request)) {
return getError("请选择文件。");
}

String dirName = request.getParameter("dir");
if (dirName == null || dirName.equals("null")) {
dirName = "image";
}
String address = "weixinImg/";
if (dirName.equals("media")) {
address = "zongsMedia/";
}

if (!extMap.containsKey(dirName)) {
return getError("目录名不正确。");
}
// 创建文件夹
savePath += "/" + dirName + "/";
File saveDirFile = new File(savePath);
if (!saveDirFile.exists()) {
saveDirFile.mkdirs();
}
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
String ymd = sdf.format(new Date());
savePath += ymd + "/";
File dirFile = new File(savePath);
if (!dirFile.exists()) {
dirFile.mkdirs();
}

MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
Iterator<MultipartFile> itr = multipartRequest.getFileMap().values().iterator();
while (itr.hasNext()) {
MultipartFile item = (MultipartFile) itr.next();
String fileName = item.getOriginalFilename();
// 检查文件大小
if (item.getSize() > maxSize) {
return getError("上传文件大小超过10M。");
}
// 检查扩展名
String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();

if (!Arrays.<String> asList(extMap.get(dirName).split(",")).contains(fileExt)) {
return getError("上传文件扩展名是不允许的扩展名。\n只允许" + extMap.get(dirName) + "格式。");
}

SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmssSSS");
String newFileName = df.format(new Date()) + "_" + new Random().nextInt(1000) + "." + fileExt;
Map<String, Object> succMap = new HashMap<String, Object>();
try {
File uploadedFile = new File(savePath, newFileName);
copyFile(item.getInputStream(), uploadedFile);
UplocdUtil t = new UplocdUtil();

String res = address + ymd + "/" + newFileName;

t.putObject(buckName, res, savePath + newFileName);
String url = "http://" + buckName + ".oss-cn-hangzhou.aliyuncs.com/" + res;
System.out.println(url);
succMap.put("error", 0);
succMap.put("url", url);
} catch (Exception e) {
e.printStackTrace();
return getError("上传文件失败。");
}

return succMap;
}
return getError("上传失败");
}

2.登录跳转

由于系统是自微信服务号跳转进入，此功能是根据由微信传入的openid判断此用户是否已经在数据库中，如果存在，则直接显示其姓名，手机和公司，如果不存在，则需要他手动进行填写。前端设置如下：

<c:choose>
<c:when test="${flag != 1 }">
<div class="x_cent mtop xpading">
<ul class="phone_wrap">
<li>
<label>申请人
<input type="hidden" id="openId" value="${openId }">
<input type="text" name="name" class="nickname" id="name" placeholder="请输入您的真实姓名" onkeyup="value=value.replace(/[^\u4E00-\u9FA5\a-\z\A-\Z\•\.]/g,'')" value="${realName }" maxlength="18">
</label>
</li>
<li>
<form action="${pageContext.request.contextPath}/upload/uploadSubmit">
<label>推荐方
<input type="text" name="company" id="textInput" placeholder="请输入公司名称或公司编号，没有填无" onkeyup="changeText()" class = "input" value="${companyN }" maxlength="30">
</label>
</form>
</li>
<li>
<label>手机号
<input type="tel" name="phone" id="phone" placeholder="请输入您的手机号" onkeyup="this.value=this.value.replace(/\D/g,'')" value="${phone }">
</label>
</li>
<li>
<label>验证码
<input type="number" name="veriCode" id = "vcode" placeholder="请输入您收到的验证码" style="width: 4rem;" class='yan' onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" value="">
</label>
<input type="button" class="hmac" value="获取验证码">
</li>

</ul>
</div>
</c:when>

<c:otherwise>
<div class="x_cent mtop xpading">
<ul class="phone_wrap">
<li>
<label>申请人
<input type="hidden" id="openId" value="${openId }">
<input type="text" name="name" class="nickname" id="name" disabled="disabled" placeholder="请输入您的真实姓名" onkeyup="value=value.replace(/[^\u4E00-\u9FA5\a-\z\A-\Z\•\.]/g,'')" value="${realName }" maxlength="18">
</label>
</li>
<li>
<form action="${pageContext.request.contextPath}/upload/uploadSubmit">
<label>推荐方
<input type="text" name="company" id="textInput" disabled="disabled" placeholder="请输入公司名称或公司编号，没有填无" onkeydown="changeText()" class = "input" value="${companyN }" textInput_1="${recommendCompanyId}" maxlength="30">
</label>
</form>
</li>
<li>
<label>手机号
<input type="tel" name="phone" id="phone" disabled="disabled" placeholder="请输入您的手机号" onkeyup="this.value=this.value.replace(/\D/g,'')" value="${phone }">
</label>
</li>
</ul>
</div>
</c:otherwise>
</c:choose>

后端可将查到的数据存入json中，并设定flag = 1，若数据库中查到了数据，则其直接填入，否则需要用户自己填写。