项目中用到图片的无刷新上传,因此想到用ajaxUpLoadFile来解决。
第一步,先在上传图片的页面引入你下载到本地的ajaxfileupload.js文件。文件下载地址:http://download.csdn.net/detail/up19910522/7471163
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',