通过ajax 图片显示并上传图片

1.首先是controller层

	@RequestMapping("upload.do")
	    @ResponseBody
	    public String saveStampdefByForm(@RequestParam("imageupload") CommonsMultipartFile[]  files,HttpServletRequest request) throws Exception
	    {	
			String path = request.getServletContext().getRealPath("/images/");
			String filename =null;
			for(CommonsMultipartFile file : files){
				filename = file.getOriginalFilename();
				System.out.println(filename);
				String fullname = path + filename;
				System.out.println(fullname);
				//获取到上传文件的文件流
				InputStream is =  file.getInputStream();
				//fullname 指定文件路径 
				OutputStream os = new FileOutputStream(new File(fullname));
				//流操作的时候的缓存
				byte[] buffer = new byte[1024];
				//实际每一次流操作的时候的字节数
				int len = 0;
				while((len = is.read(buffer))!=-1){
					os.write(buffer, 0, len);
					os.flush();
				}
				os.close();
				is.close();
			}
			return filename;
		}

因为用的easyui ,原理都是一样的 

name="imageupload"必须和controller的 @RequestParam("imageupload") CommonsMultipartFile[]  files 一致

	<form id="satmpdefForm" action="#"
			style="padding: 10px 20px 10px 40px;" enctype="multipart/form-data"
			method="post">
			<table>
			<tr id="inputCB1" >
			<td><label> 横版图片 </label></td>
			<td><input multiple style="width:300px" id="imageupload" name="imageupload" class="easyui-filebox" data-options='onChange:change_photo' /></td>
		</tr>
		<tr id="inputCB4">
			<td><label>图片预览</label></td>
			<td>
				<div id="Imgdiv"><img id="Img" width="200px" height="200px" /></div>
			</td>
		</tr>
			</table>
			</form>

然后就是给Springmvc  提供插件

	<!--文件上传 -->	
	<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
		<!-- 设置所有上传文件的大小的和 -->
		<property name="maxUploadSize" value="102400000" />
		<!-- 设置单个上传文件的大小，就是每一个单独的文件不能超过100M  -->
		<property name="maxUploadSizePerFile" value="1024000"/>
		<!-- 内存缓存的文件最大为20M  -->
		<property name="maxInMemorySize" value="20480"/>
	</bean>

前端jsp  ajax事件

//提交表单数据
    function submitForm() {
                var form = new FormData($('#satmpdefForm')[0]);
                 $.ajax({
                     url: 'upload.do',
                     type: 'post',
                     data: form,
                     processData:false,
                     contentType:false,
                     success:function(data){
                     	alert(data)
                     		$('#dd').dialog('close')
							var row = $('#dg').datagrid('getSelected');
							row.goodsimage = data
							$('#fm2').val(imagename)
							getData();
							$('#fm').form('load', row);
							$(".img1").attr('src',"<%=basePath%>images/"+data);
                       		 $.messager.show({
                                        title : '提示',
                                        msg : '提交成功',
                                        timeout : 3000,
                                        showType : 'slide'
                                        });
                         }
                 });
    }

前端图片显示

	function change_photo() {
		PreviewImage($("input[name='imageupload']")[0], 'Img', 'Imgdiv');
	}
	function PreviewImage(fileObj, imgPreviewId, divPreviewId) {
		var allowExtention = ".jpg,.bmp,.gif,.png"; //允许上传文件的后缀名document.getElementById("hfAllowPicSuffix").value;  
		var extention = fileObj.value.substring(fileObj.value.lastIndexOf(".") + 1).toLowerCase();
		var browserVersion = window.navigator.userAgent.toUpperCase();
		if (allowExtention.indexOf(extention) > -1) {
			if (fileObj.files) { //HTML5实现预览，兼容chrome、火狐7+等  
				if (window.FileReader) {
					var reader = new FileReader();
					reader.onload = function(e) {
						document.getElementById(imgPreviewId).setAttribute("src", e.target.result);
					}
					reader.readAsDataURL(fileObj.files[0]);
				} else if (browserVersion.indexOf("SAFARI") > -1) {
					alert("不支持Safari6.0以下浏览器的图片预览!");
				}
			} else if (browserVersion.indexOf("MSIE") > -1) {
				if (browserVersion.indexOf("MSIE 6") > -1) { //ie6  
					document.getElementById(imgPreviewId).setAttribute("src", fileObj.value);
				} else { //ie[7-9]  
					fileObj.select();
					if (browserVersion.indexOf("MSIE 9") > -1)
						fileObj.blur(); //不加上document.selection.createRange().text在ie9会拒绝访问  
					var newPreview = document.getElementById(divPreviewId + "New");
					if (newPreview == null) {
						newPreview = document.createElement("div");
						newPreview.setAttribute("id", divPreviewId + "New");
						newPreview.style.width = document.getElementById(imgPreviewId).width + "px";
						newPreview.style.height = document.getElementById(imgPreviewId).height + "px";
						newPreview.style.border = "solid 1px #d2e2e2";
					}
					newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + document.selection.createRange().text + "')";
					var tempDivPreview = document.getElementById(divPreviewId);
					tempDivPreview.parentNode.insertBefore(newPreview, tempDivPreview);
					tempDivPreview.style.display = "none";
				}
			} else if (browserVersion.indexOf("FIREFOX") > -1) { //firefox  
				var firefoxVersion = parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);
				if (firefoxVersion < 7) { //firefox7以下版本  
					document.getElementById(imgPreviewId).setAttribute("src", fileObj.files[0].getAsDataURL());
				} else { //firefox7.0+                      
					document.getElementById(imgPreviewId).setAttribute("src", window.URL.createObjectURL(fileObj.files[0]));
				}
			} else {
				document.getElementById(imgPreviewId).setAttribute("src", fileObj.value);
				alert(document.getElementById(imgPreviewId).getAttribute("src"))
			}
		} else {
			alert("仅支持" + allowExtention + "为后缀名的文件!");
			fileObj.value = ""; //清空选中文件  
			if (browserVersion.indexOf("MSIE") > -1) {
				fileObj.select();
				document.selection.clear();
			}
			fileObj.outerHTML = fileObj.outerHTML;
		}
	}

如果需要通过ajax上传回显只需要把反馈回来的图片路径给前端前端进行更改就是了。。 其中图片显示网上一搜一大堆如果看不懂