基于jQuery的ajax方式的图片上传

文件上传一般有两种方式：

• 一是将文件直接以二进制的方式存储在数据库中，这种方式读取影响性能
• 二是数据库直接存储文件的URL地址，读取文件的话直接根据数据库存储的URL地址进行读取。

所以，一般来说我们采用方式二！
html页面

$("#upload-btn").click(function () {
                var formData = new FormData($("#addPhotoForm")[0]);//对于文件类型的数据不能转化为json字符串，所以需要new FormData()
                $.ajax({
                    url: "${pageContext.request.contextPath}/student/upload_photo",
                    type: "POST",
                    data: formData,
                    /**
                     *必须false才会自动加上正确的Content-Type
                     */
                    contentType: false,
                    /**
                     * 必须false才会避开jQuery对 formdata 的默认处理
                     * XMLHttpRequest会对 formdata 进行正确的处理
                     */
                    processData: false,
                    success: function (data) {
                        if (data.type == "success") {
                            $.messager.alert("消息提醒",data.msg,"info");
                            $("#photo-preview").attr("src",data.src);//将文件的位置添加到图片预览处
                            $("#add_photo").val(data.src);//将文件上传的地址添加到隐藏的文本域中，用于之后将位置上传到数据库
                            //关闭窗口
                            $("#editDialog").dialog("close");
                        }
                        if (data.type == "error") {
                            $.messager.alert("消息提醒",data.msg,"info");
                        }
                        //$("#photo-preview").hide();//隐藏照片
                    }
                });
            });



<form id="addPhotoForm" method="post" enctype="multipart/form-data" action="/upload_photo" target="photo_target">
			<table id="addTable1" cellpadding="8">
				<tr >
					<td>预览头像:</td>
					<td>
						<img id="photo-preview" src="" alt="照片" style="max-width: 100px; max-height: 100px;" title="照片"  />
					</td>
				</tr>
				<tr>
					<td>学生头像:</td>
					<td>
						<input id="add-upload-photo" class="easyui-filebox" name="photo" data-options="prompt:'选择照片'" style="width:200px;">
						<a id="upload-btn" href="javascript:;" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">上传图片</a>
					</td>
				</tr>
			</table>
		</form>

**Springmvc的Controller页**
@RequestMapping(value="/upload_photo",method= RequestMethod.POST)
	@ResponseBody
	public Map<String,String> uploadPhoto(MultipartFile photo,HttpServletRequest request){
		Map<String,String> map = new HashMap<>();
		if (photo == null){
			map.put("type","error");
			map.put("msg","请选择一张图片");
			return map;
		}
		//判断文件名大小是否过大
		if (photo.getSize() >= 10485760){
			map.put("type","error");
			map.put("msg","文件大小超过10M");
			return map;
		}
		//保存位置
		String path = request.getSession().getServletContext().getRealPath("/photo/");
		//判断文件夹是否存在，无则建
		File file = new File(path);
		if (!file.exists()){
			file.mkdirs();
		}
		//给文件名起唯一值
		String filename = photo.getOriginalFilename();
		String uuid = UUID.randomUUID().toString().replace("-","");
		//保存文件
		filename = uuid+"_"+filename;
		try {
			photo.transferTo(new File(path,filename));//保存文件
		} catch (IOException e) {
			map.put("type","error");
			map.put("msg","上传失败");
			return map;
		}
		HttpSession session = request.getSession();
		map.put("src",session.getServletContext().getContextPath()+"/photo/"+filename);//获取文件的路径
		map.put("type","success");
		map.put("msg","上传成功");
		return map;
	}