上传图片方法

最新推荐文章于 2025-09-09 18:44:59 发布

weixin_33721344

最新推荐文章于 2025-09-09 18:44:59 发布

阅读量84

点赞数

CC 4.0 BY-SA版权

文章标签： json python javascript ViewUI

原文链接：https://my.oschina.net/whatwhy/blog/821924

本文介绍了一种使用Java实现头像上传的方法，通过两种不同方式的控制器代码展示了如何处理文件上传，并利用Ajax实现异步更新头像预览。此外，还提供了一个简单的JSP页面示例及所需的JavaScript脚本。

2019独角兽企业重金招聘Python工程师标准>>>

controller

	@RequestMapping(value = "upload/uploadPortrait")
	@ResponseBody
	public JSONObject uploadUserImages(HttpServletRequest request,
			@RequestParam("portrait") CommonsMultipartFile file) {
		JSONObject json = new JSONObject();
		String imgPath = "";

		if (file != null) {
			imgPath += file.getOriginalFilename();
			String realPath = request.getSession().getServletContext()
					.getRealPath("/upload");
			try {
				FileUtils.copyInputStreamToFile(file.getInputStream(),
						new File(realPath, file.getOriginalFilename()));
			} catch (IOException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
		json.put("imgPath", imgPath);

		return json;
	}

----------------------------------------------------------------------------------------


@RequestMapping(value = "upload/uploadPortrait")
	@ResponseBody
	public JSONObject uploadUserImages(HttpServletRequest request
			) {
		JSONObject json = new JSONObject();
		String imgPath = "";
		
		MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
		CommonsMultipartFile file = (CommonsMultipartFile) multipartRequest
			     .getFile("portrait");
		if (file != null) {
			imgPath += file.getOriginalFilename();
			String realPath = request.getSession().getServletContext()
					.getRealPath("/upload");
			try {
				FileUtils.copyInputStreamToFile(file.getInputStream(),
						new File(realPath, file.getOriginalFilename()));
			} catch (IOException e) {
				e.printStackTrace();
			}
		}
		json.put("imgPath", imgPath);

		return json;
	}

备注：两种写法，效果一样。

jsp页面

<script src="<%=path%>/scripts/ajaxupload.js"></script>

 <script type="text/javascript">
$(function(){
		var isCanSub = true;
		
		if(!isCanSub){
			return;
		}
		isCanSub = false;
		/* 图片上传 */
		var $e = $(".personal_jm_tx");
		var $uploader = $("#-upload");
		var $image = $e.find("img");
		new AjaxUpload($uploader, {
		name: 'portrait',
		action: '<%=path%>/upload/uploadPortrait.do',
		responseType: 'json',
		onChange: function (file, extension) {
		},
		onSubmit: function (file, extension) {
		//this.disable();
		},
		onComplete: function (file, response) {
		$uploader.show();
		if (response.success) {
		$image.attr("src", response.userImageUrl);
		} else {
		$(".pop").css("display", "block");
		isCanSub = true;
		alert(response.imgPath);
		var element = document.getElementById('zsImg');
		element.src = "<%=path%>/upload/"+response.imgPath;
		
		}
		}
		});
		
	})

</script>

--------------------------------------------------------------------------------------------
<p><a href="#" id="-upload" style="display: block" class="shangchuan">[更换头像]</a></p>
  	<img id="zsImg" src="">

js名字是：ajaxupload.js

转载于:https://my.oschina.net/whatwhy/blog/821924