您的位置:首页 > 编程语言 > Java开发

Java+ajax+图片上传

2014-06-19 12:09 260 查看
Java结合ajax操作图片上传。

代码片段:

1.html页面

<div id="event_overview_layout_logo" class="span6">
<div class="thumbnail">
<form action="<c:url value="/user/uploadEventLogo.json" />" enctype="multipart/form-data" id="event_file_upload_form" method="post" style="margin:0px;">						<input type="hidden" name="activityId"  value="1231377266400"/>
<div class="fileupload-buttonbar" style="margin:0px;padding:0px;position:absolute;">
<span class="fileinput-button" style="padding:0px;">
<div class="btn"><i class="icon-upload"></i><span>上 传</span></div>
<input id="event_logo_upload_file" type="file" name="event_logo_upload_file" />
<input type="hidden" name="id" value="${event.id }" />
</span>
<span style="margin-top:6px;color:red;font-size:12px;display:inline-block;" id="event_logo_description">
(尺寸(像素):<b>宽472 * 高280</b>)
</span>
</div>
</form>
<div style="height:38px;"></div>
<img id="event_logo_image" src="<c:url value="${event.banner}" />" style="width:424px;height:252px;"/>
</div>
<font style="color:gray;">*默认使用最后一次上传的海报</font>
</div>


2.js
<script type="text/javascript">
$(function () {
$('#event_file_upload_form').fileupload({
autoUpload: true,
dataType : 'json',
maxNumberOfFiles: 1,
maxFileSize: 1000000,
pasteZone: null,
dropZone: null,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png|bmp)$/i,
done: function (e, data) {
if(data.result.success==true){
window.alert("上传活动海报成功。");
$("#event_logo_image").prop("src", '<c:url value="/upload/"/>'+data.result.fileName);
}else{
window.alert("对不起,上传活动海报出错,请稍候重试。");
}
},
fail: function (e, data) {
window.alert("对不起,上传活动海报出错,请稍候重试。");
}
});
});

function setEventBaseOverview(data, description){
alert(data.event.id);
if(data == null || data.event.id == null || data.event.id <= 0) return;
$("#event_file_upload_form input[name='id']").val(data.event.id);
$("#event_title_overview").html(data.event.title);
$("#event_tag_overview").html(data.event.tag);
$("#event_address_overview").html(data.event.province+" "+data.event.city + " " + data.event.address);
}
</script>


2.acion 处理

/**
* 上传event logo
* @param result
* @param request
*/
@RequestMapping(value="/uploadEventLogo")
public void uploadEventLogo(ModelMap result,HttpServletRequest request){
result.clear();
result.put("success", false);
String baseDir=request.getSession().getServletContext().getRealPath("/");
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();
for (Map.Entry<String, MultipartFile> entity : fileMap.entrySet()) {
MultipartFile mf = entity.getValue();
String fileName = mf.getOriginalFilename();

String uuid=StringUtil.getUUID();
String newFileName=uuid+fileName.substring(fileName.lastIndexOf("."));
String file=baseDir+"/upload/"+newFileName;
File uploadFile = new File(file);
try {
FileCopyUtils.copy(mf.getBytes(), uploadFile);
result.put("success", true);
result.put("fileName", newFileName);
String eventId=multipartRequest.getParameter("id");
Event event=new Event();
event.setId(Integer.parseInt(eventId));
event.setBanner("/upload/"+newFileName);
eventService.modifyEventByExample(event);
break;
}catch (Exception e) {
log.error("上传文件异常", e);
}

}

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: