ajax异步上传图片及回显

1、导入文件上传的mavn坐标

         <!-- 文件上传用 -->
       <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.4</version>
        </dependency>
        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.3.1</version>
        </dependency>
        <!--json工具-->
        <dependency>
            <groupId>org.json</groupId>
            <artifactId>json</artifactId>
            <version>20140107</version>
        </dependency>

2、Springmvc配置文件设置文件上传核心组件

<!--文件上传插件-->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
</bean>
	

3、前端图片上传

上传图片表单:

	<tr>
		<td class="three">图片介绍</td>
        <td> <br><div id="imgDiv" style="display:block; width: 40px; height: 50px;">    
         </div><br><br><br><br>
         <input type="file" id="pimage" name="pimage" onchange="fileChange()" >
          <span id="imgName" ></span><br>
       </td>
   </tr>

js fileChange方法中完成异步ajax上传和回显:
  <script type="text/javascript">
        function fileChange(){
        	//注意：此处不能使用jQuery中的change事件，因此仅触发一次，因此使用标签的：onchange属性
            $.ajaxFileUpload({
                url: '${pageContext.request.contextPath}/prod/ajaxImg.action',//用于文件上传的服务器端请求地址
                secureuri: false,//一般设置为false
				//文件上传控件的id属性  <input type="file" id="pimage" name="pimage" />
				fileElementId: 'pimage',
                dataType: 'json',//返回值类型 一般设置为json
                success: function(obj) //服务器成功响应处理函数
                {
                    $("#imgDiv").empty();  //清空原有数据
                    //创建img 标签对象
                    var imgObj = $("<img>");
                    //给img标签对象追加属性
                    imgObj.attr("src","/image_big/"+obj.imgurl);//设置图片路径
                    imgObj.attr("width","100px");//设置宽
                    imgObj.attr("height","100px");//设置高
                    //将图片img标签追加到imgDiv末尾
                    $("#imgDiv").append(imgObj);
                    //将图片的名称（从服务端返回的JSON中取得）赋值给文件本框
                     $("#imgName").html(data.imgName);
                },
                error: function (e)//服务器响应失败处理函数
                {
                    alert(e.message);
                }
            });
        }
    </script>

4、导入工具类

package com.rk.utils;
import java.util.UUID;
public class FileNameUtil {
	//根据UUID生成文件名
	public static String getUUIDFileName() {
		UUID uuid = UUID.randomUUID();
		return uuid.toString().replace("-", "");
	}
	//从请求头中提取文件名和类型
	public static String getRealFileName(String context) {
		// Content-Disposition: form-data; name="myfile"; filename="a_left.jpg"
		int index = context.lastIndexOf("=");
		String filename = context.substring(index + 2, context.length() - 1);
		return filename;
	}
	//根据给定的文件名和后缀截取文件名
	public static String getFileType(String fileName){
		//9527s.jpg
		int index = fileName.lastIndexOf(".");
		return fileName.substring(index);
	}
}

        图片上传后要修改名称再保存，否则上传同名文件会被覆盖 ，所以要用工具类生成新的文件名

5、编写ajaxImg接口

 //异步ajax文件上传处理
    @ResponseBody
    @RequestMapping("/ajaxImg")
    public Object ajaxImg(MultipartFile pimage,HttpServletRequest request){
        //上传图片  存储图片

        //提取生成文件名UUID+上传图片的后缀.jpg   .png   getFileType()传入图片的名称，自动截取后缀
        String saveFilename=FileNameUtil.getUUIDFileName()+ FileNameUtil.getFileType(pimage.getOriginalFilename());
        //获取图片要存储的路径
        String path = request.getServletContext().getRealPath("/image_big");
        //转存    路径+/+文件名    比如:E:\Mi-ssm\Image_big\slgjhakl234algjlajg.jpg
        try {
            pimage.transferTo(new File(path+File.separator+saveFilename));
        } catch (IOException e) {
            e.printStackTrace();
        }


        //回显图片  返回客户端JSON对象，封装图片的路径，为了在页面实现立即回显
        JSONObject object=new JSONObject();
        object.put("imgurl",saveFilename);//imgurl保存图片名称

        return object.toString();
    }

6、效果展示