关于AjaxFileUpload后台返回Json的处理

来源：互联网发布：小区网络监控布线编辑：程序博客网时间：2024/04/30 15:29

项目中用到图片的无刷新上传，因此想到用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 @ResponseBodyString 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',

31 0