左右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;
}
第四部，前台页面代码：[code]<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>

然后就能够上传文件了。

[/code]

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

[code]就是将Ajax中的

dataType : 'json',换成
dataType : 'text',