关于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',

相关文章

JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表单提交的返回...
AJAX 每日更新前端基础,如果觉得不错,点个star吧 &#128515; https://github.com/WindrunnerMax/E...
踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使用的SpringSe...
很早就听闻ajax的名声,但是却一直不知道怎么用,今天自己捣鼓了一下,竟然会用了,哈哈哈哈。 为了防止...
需要在服务器上进行哈 jquery的ajax方法: // jquery请求 $.ajax({ url: &quot;./server/slider.js...
Ajax函数封装ajax.js // Get / Post // 参数 get post // 是否异步 // 如何处理响应数据 // URL // var...