无刷新上传图片并预览

点击上传按钮弹出文件选择框，选择完文件后直接后台上传，前台显示上传的图片。主要思路：上传按钮点击事件触发文件选择器的事件 设置文件选择器的onchange事件通过ajax提交。

前端：

<div class="fileupload fileupload-new"	data-provides="fileupload">
	<div class="fileupload-preview thumbnail form-control"style="width:100%;height:300px;">
	<img src="" class="w-100" alt="" id="showimg" name="showing"style="height:300px;">
	</div>
	<div>
	<span class="btn  btn-alt btn-sm" style="float:right;">
	<span onclick="uploadpic()">上传</span>	</span>
	<div hidden="hidden"><input type="file" id="btn_file" onchange="submitfile()" name="btn_file" />
	</div>
</div>
</div>

js（要引入ajaxfileupload.js）：

<script type="text/javascript">
		function uploadpic() {
			var f = document.getElementById("btn_file");
			f.click();
		}
		
		function submitfile(){			
			var filepath = $("input[name='btn_file']").val();
			var fileName = getFileName(filepath);

			var extStart = filepath.lastIndexOf(".");
			var ext = filepath.substring(extStart, filepath.length)
					.toUpperCase();

			if (ext != ".BMP" && ext != ".PNG" && ext != ".GIF"
					&& ext != ".JPG" && ext != ".JPEG") {
				alert("图片限于bmp,png,gif,jpeg,jpg格式");
				$("#fileType").text("");
				$("#fileSize").text("");
				return false;
			} else {
				// $("#fileType").text(ext)
			}
			
			 sub(fileName);
			
		}

		

		function getFileName(o) {
			var pos = o.lastIndexOf("\\");
			return o.substring(pos + 1);
		}

		function sub(fileName) {
			 $.ajaxFileUpload  
		        (  
		            {  
		                url: 'uploadPic.do',  
		                secureuri: false,  
		                fileElementId: 'btn_file',  
		                dataType: 'text',  		               
		                success: function(data,status) {
		                
		                	 if(data=="<pre>success</pre>"){
		                	 $("#showimg").attr("src","uploadFiles/uploadImgs/"+fileName);
		                	 }
		                	
		                	
		                },  
		                error: function(data,status,e) {  
		                  alert("上传失败");  
		                }  
		            }  
		        ); 
			 
			 
			 /* var srcimg="uploadFiles/uploadImgs/"+fileName;			 
			 document.getElementById("showimg").src=srcimg; */

		}
	</script>

后台：

@RequestMapping(value = "/uploadPic")
	@ResponseBody
	public void uploadPic(HttpServletRequest request,
			HttpServletResponse response) throws IllegalStateException,
			IOException {
		String result="fail";

		CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(
				request.getSession().getServletContext());
		// 判断 request 是否有文件上传,即多部分请求
		if (multipartResolver.isMultipart(request)) {
			// 转换成多部分request
			MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
			// 取得request中的所有文件名
			Iterator<String> iter = multiRequest.getFileNames();
			while (iter.hasNext()) {
				// 记录上传过程起始时的时间用来计算上传时间
				int pre = (int) System.currentTimeMillis();
				// 取得上传文件
				MultipartFile file = multiRequest.getFile(iter.next());
				if (file != null) {
					// 取得当前上传文件的文件名称
					String myFileName = file.getOriginalFilename();
					// 如果名称不为“”,说明该文件存在，否则说明该文件不存在
					if (myFileName.trim() != "") {
						System.out.println(myFileName);
						 // 项目在容器中实际发布运行的根路径
				        String realPath=request.getSession().getServletContext().getRealPath("/");

						// 重命名上传后的文件名
						String fileName = "uploadFiles/uploadImgs/"
								+ file.getOriginalFilename();
						// 定义上传路径
						String path = realPath + fileName;
						File localFile = new File(path);
						file.transferTo(localFile);
						result="success";
					}
				}
				// 记录上传该文件后的时间
			//	int finaltime = (int) System.currentTimeMillis();
			//	System.out.println(finaltime - pre);
			}
		}
		response.getWriter().write(result);
		
	}