使用ajaxFileUpload.js实现无刷新上传图片

首先，需要导入的js：

<script src="${pageContext.request.contextPath}/js/jquery-1.8.3.min.js" type="text/javascript">script>

<script src="${pageContext.request.contextPath}/js/ajaxfileupload.js" type="text/javascript">script>

页面：

		

			

				

				

					
				
				

					

						员工号: 
					
					......
					

						状  态: 
						
							可用
							禁用
						
					
				
				

					

						头  像: 
					
					

						住  址: 
					
					

						 保存
					
				
				
			
		
	

js代码：

$("#dg").datagrid({
            url: '${pageContext.request.contextPath}/emp/emps.do',//${pageContext.request.contextPath}/emp/emps.do
            columns:[[
                      {field:"e_img",title:"头像",width:150,
                      	formatter:function(value){
                      		var str = "";
      	 			    	if(value!="" || value!=null){
      	 			    		//var e_img = $('#e_imgBack')[0].src;
      	 			    		str = "";
      	 			            return str;
      	 			    	}
                      	}  
                      },
                      {field:"id",title:"id",hidden:"hidden"},  
                      {field:"e_nums",title:"员工号",width:150}, 
                      {field:"e_username",title:"姓名",width:100},
                        ......

function ajaxFileUpload() {
    	//var e_img = $("#e_img").val();
    	//alert(e_img);  //C:\fakepath\15.jpg
        $.ajaxFileUpload
            (
                {
       	         //处理文件上传操作的服务器端地址(可以传参数,已亲测可用)
       	         url:'${pageContext.request.contextPath}/emp/uploadE_img.do',
       	         secureuri:false,                           //是否启用安全提交,默认为false 
       	         fileElementId:'e_img',               //文件选择框的id属性
       	         dataType:'text',                           //服务器返回的格式,可以是json或xml等
       	         success:function(data, status){            //服务器响应成功时的处理函数
       	             data = data.replace(//g, '');  //ajaxFileUpload会对服务器响应回来的text内容加上
text
前后缀
       	             data = data.replace(//g, '');
       	             data = data.replace("
", '');
       	             data = data.replace("
", '');
       	             data = data.replace("
", '');
       	             data = data.replace("
", '');     //本例中设定上传文件完毕后,服务端会返回给前台[0`filepath]
       	             if(data.substring(0, 1) == 0){         //0表示上传成功(后跟上传后的文件路径),1表示失败(后跟失败描述)   :substring(form,to)方法
       	                 $("img[id='e_imgBack']").attr("src", data.substring(2));
       	             	 //alert(data.substring(2));  // D:\tomcat7\apache-tomcat-7.0.85\wtpwebapps\wasteRecycle\upload\timg.jpg
       	                 $('#result').html("图片上传成功!
");
       	             }else{
       	                 $('#result').html('图片上传失败，请重试（小于5M）！！');
       	             }
       	         },
       	         error:function(data, status, e){ //服务器响应失败时的处理函数
       	             $('#result').html('图片上传失败，请重试（小于5M）！！');
       	         }
       	     });
       	 }

后台代码：

//  这里用到了如下的jar
	//  commons-io-2.4.jar
	//  commons-fileupload-1.3.jar
	//  commons-logging-1.1.2.jar
	/**
	 * 使用ajaxFileUpload.js实现无刷新上传图片
	 * @param e_img
	 * @param request
	 * @param response
	 * @return
	 * @throws IOException
	 */
	@RequestMapping("uploadE_img")
	@ResponseBody
	public String uploadPicture(@RequestParam MultipartFile e_img, HttpServletRequest request, HttpServletResponse response)
			throws IOException {
		// 如果用的是Tomcat服务器，则文件会上传到\\%TOMCAT_HOME%\\webapps\\YourWebProject\\upload\\文件夹中
		// 这里实现文件上传操作用的是commons.io.FileUtils类,它会自动判断/upload是否存在,不存在会自动创建
		String realPath = request.getSession().getServletContext().getRealPath("/upload");
		// 设置响应给前台内容的数据格式
		response.setContentType("text/plain; charset=UTF-8");
		// 设置响应给前台内容的PrintWriter对象
		PrintWriter out = response.getWriter();
		// 上传文件的原名(即上传前的文件名字)
		String originalFilename = null;
		// 如果只是上传一个文件,则只需要MultipartFile类型接收文件即可,而且无需显式指定@RequestParam注解  但e_img要和页面中的name属性值相同；
		// 如果想上传多个文件,那么这里就要用MultipartFile[]类型来接收文件,并且要指定@RequestParam注解
		// 上传多个文件时,前台表单中的所有的name都应该是myfiles,否则参数里的myfiles无法获取到所有上传的文件
		// for(MultipartFile myfile : myfiles){
		if (e_img.isEmpty()) {
			out.print("1`请选择文件后上传");
			out.flush(); //输出流   清空缓冲区
			return null;
		} else {
			originalFilename = e_img.getOriginalFilename();
			System.out.println("文件原名: " + originalFilename);
			System.out.println("文件名称: " + e_img.getName());
			System.out.println("文件长度: " + e_img.getSize());
			System.out.println("文件类型: " + e_img.getContentType());
			System.out.println("========================================");
			try {
				// 这里不必处理IO流关闭的问题,因为FileUtils.copyInputStreamToFile()方法内部会自动把用到的IO流关掉
				// 此处也可以使用Spring提供的MultipartFile.transferTo(File dest)方法实现文件的上传
				FileUtils.copyInputStreamToFile(e_img.getInputStream(), new File(realPath, originalFilename));
			} catch (IOException e) {
				System.out.println("文件[" + originalFilename + "]上传失败,堆栈轨迹如下");
				e.printStackTrace();
				out.print("1`文件上传失败，请重试！！");
				out.flush();
				return null;
			}
		}
		//System.out.println(realPath + "\\" + originalFilename);
		// 此时在Windows下输出的是[D:\tomcat7\apache-tomcat-7.0.85\wtpwebapps\wasteRecycle\ upload\timg.jpg]：如果我们重新发布工程，tomcat其实是先将原来的工程删掉，然后再将改动过的新的工程放上去，上传的东西就会丢失；
		//System.out.println(request.getContextPath() + "/upload/" + originalFilename);
		// 此时在Windows下输出的是[/wasteRecycle/upload/timg.jpg]
		// 不推荐返回[realPath + "\\" + originalFilename]的值
		// 因为在Windows下能被firefox显示,而firefox是不认的
		out.print("0`" + request.getContextPath() + "/upload/" + originalFilename);
		out.flush();
		return null;
	}

效果如下图所示：

完成任务、收工！！！