左右AjaxFileUpload背景返回Json治

项目中用到图片的无刷新上传，因此想到用ajaxUpLoadFile来解决。

第一步，先在上传图片的页面引入你下载到本地的ajaxfileupload.js文件。

文件下载地址：http://download.csdn.net/detail/up19910522/7471163

第二步，编写上传文件的js代码

function upLoadImage() {
	var f = document.getElementById('fileToUpload').files[0];
	alert(f.name); $.ajaxFileUpload({
				fileElementId : 'fileToUpload',
				url : '/ZHDM/chat/uploadImage',
				dataType : 'text',
				data : {},
				async : true,
				error : function(data) {
					alert(data);
					alert("网络异常，请重试");
				},
				success : function(message) {
					alert(message);
				}
			})
}

第三步。后台接收文件并存储

@RequestMapping(value = "uploadImage", method = RequestMethod.POST)
	public @ResponseBody
	String uploadImage(HttpServletRequest request)
			throws IllegalStateException, IOException {
		System.out.println("进入控制层");
		String pathString="";
		User loginUser = (User) request.getSession().getAttribute("loginUser");
		// 推断SESSION是否失效
		if (loginUser == null || "".equals(loginUser)) {
			return "250";
		}
		int loginUserId = loginUser.getUserId();
		List<String> paths = new ArrayList<>();
		// 设置上下文
		CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(
				request.getSession().getServletContext());
		// 检查form是否有enctype="multipart/form-data"
		if (multipartResolver.isMultipart(request)) {

			MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;

			Iterator<String> iter = multiRequest.getFileNames();

			while (iter.hasNext()) {
				// 由CommonsMultipartFile继承而来,拥有上面的方法.
				MultipartFile file = multiRequest.getFile(iter.next());
				System.out.println("file:" + file.getSize());
				// 假设文件不为空，则进行处理
				if (!file.isEmpty()) {
					// 对图片文件名称进行处理。取得最后的6个字符。然后以"."为分隔符取得文件后缀
					String originalFileName = file.getOriginalFilename();

					// 取得后缀
					String suffixString = originalFileName
							.substring(originalFileName.lastIndexOf(".") + 1);

					// 取得IP地址
					String ip = new CheckIPImpl().checkIpAddress(request);

					// 取得IP地址+时间戳 作为文件名称 防止文件名称反复
					IPTimeStamp ipTimeStamp = new IPTimeStamp(ip);
					String randomFileName = ipTimeStamp.getIPTimeRand();

					// 设定文件名称称
					String fileName = randomFileName + "." + suffixString;

					// 地址为d:\\fileupload\\license目录下
					String path = "D:" + File.separator + "fileupload"
							+ File.separator + "chat" + File.separator
							+ fileName;
					String targerpath = "D:" + File.separator + "fileupload"
							+ File.separator + "chat" + File.separator + "m"
							+ fileName;
					File localFile = new File(path);

					try {
						file.transferTo(localFile);
						// 将图片名称和相对路径存到数据库中
						paths.add("/pic/chat/" + fileName);
						pathString = "pic/chat/" + fileName;
					} catch (IllegalStateException e) {
						e.printStackTrace();
					} catch (IOException e) {
						e.printStackTrace();
					}
				}

			}
		}
		// pathString="cao";
		return pathString;
	}
第四部，前台页面代码：
<div class="creatGroup ml50" id="addlicensephoto">
		<h5>
			<span class="pngIcon deleteIcon fr" onclick="HideUpLoadpic()"></span>上传证照
		</h5>
		<div class="crearCon searchMain">
			<form id="uploadform"  enctype="multipart/form-data" name="uploadform" method="post" onsubmit="return Checkuploadform()">
				<ul class="cons clearfix">
				    <li class="clear"><input id="fileToUpload" type="file" size="45" name="fileToUpload" class="uploadinput" ></li>
			</form>
		</div>
	</div>
然后就能够上传文件了。

笔者这里顺道把后台返回给前台的json出错的问题攻克了。

就是将Ajax中的
	dataType : 'json',换成
	dataType : 'text',

版权声明：本文博主原创文章，博客，未经同意不得转载。