最近在做上传文件(主要是图片)的功能,因为在此过程中遇到了不少问题,在此做个总结。
一 环境
1 Jboss服务器:centos7
2 语言:Java
3 框架:springMVC
4 图片服务器:nginx
二 主要技术
为了降低Jboss服务器的IO操作,同时提高页面的加载速度,使用nginx服务器作为图片服务器,我们在上传图片时,将向Jboss服务器放置一张图片,同时向nginx服务器上传一张图片,同时将nginx服务器的图片路径存入数据库中,页面显示图片时,只需要按照数据库中的图片路径即可找到相关图片。
三 实现
1 前端HTML
<span style="font-size:18px;"> <span class="col-sm-2 control-label">个人头像</span>
<img id="imgCoursePoster" src="${pageContext.request.contextPath}/css/images/lecturer.jpg" />
<i class="icon-del" onclick="deleteCoursePoster()" title="移除"></i>
<input type="file" onchange="uploadCoursePoster();" id="fileCoursePoster" style="display: none;" name="fileCoursePoster" />
<span id="errorCoursePoster" style="color: red; display: none;">请上传图片!</span>
<input id="btnUploadPic" type="button" onclick="upLoad()" value="上传头像" class="btn btn-sm btn-normal"></span>
2 JavaScript
<span style="font-size:18px;"> function uploadCoursePoster() {
var imageType = document.getElementById("imageType").value;
var studentId=$("#studentId").val();
var sessionId = $("#sessionId").val();
$.ajaxFileUpload({
url : "/itoo-jrkj-student-web/media/uploadImages", // 需要链接到服务器地址
secureuri : false,
data : {
"studentId" : studentId,
"imageType" : imageType
},
fileElem