Java+ajax+图片上传

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);
			}
            
		}
		
	}