一、非form表单提交
html页面
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>文件上传</title> </head> <body> <div> <input type="file" id="file" name="myfile" /> <input type="button" onclick="UpladFile()" value="上传" /> </div> </body> js
<script> /*附件上传*/ function UpladFile() { var fileObj = document.getElementById("file").files[0]; // 获取文件对象 var FileController = "../../upladFile"; // 接收上传文件的后台地址 // FormData 对象 var form = new FormData(); /*form.append("name", "tom"); */ // 可以增加表单数据 form.append("file", fileObj); // 文件对象 // XMLHttpRequest 对象 var xhr = new XMLHttpRequest(); xhr.open("post", FileController, true); xhr.onload = function () { alert("上传完成!"); }; xhr.send(form); } </script> 二、form表单提交
html页面
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>文件上传</title> <script type="text/javascript" src="../js/jquery.ui.widget.js?v=0.12"></script> <script type="text/javascript" src="..js/jquery.iframe-transport.js?v=0.12"></script> <script type="text/javascript" src="../js/jquery.fileupload.js?v=0.12"></script> <script src="../js/uploadPreview.js" type="text/javascript?v=0.12"></script> </head> <body> <form action="../../upladFile" method="post" enctype="multipart/form-data"> <input style="" type="file" name="files" accept=""/> <input type="submit" value="上传" id="fileupload4" /> </form> </body> js
<script> /*附件上传*/ var isExple = false; $('#fileupload4').fileupload({ dataType: 'json', progressall: function (e, data) { var progress = parseInt(data.loaded / data.total * 100, 10); if (progress > 99) { alert("上传成功"); } }, done: function (e, data) { $('.progress-bar').text("上传成功"); }, success: function (result, textStatus, jqXHR) { if(isExple){ //set录入名称 } }, }); </script> Controller
@RequestMapping(params = "upladFile", method = RequestMethod.POST) @ResponseBody public synchronized LinkedList<FileMeta> upladFile( MultipartHttpServletRequest request, HttpServletResponse response, HttpServletRequest request2) Iterator<String> itr = request.getFileNames(); while (itr.hasNext()) { MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request; SimpleDateFormat dateformat = new SimpleDateFormat("yyyy/MM/dd/HH"); /** 构建文件保存的目录* */ String logoPathDir = "/business/xfWei/upload/" + dateformat.format(new Date()); /** 得到文件保存目录的真实路径* */ String logoRealPathDir = request.getSession().getServletContext() .getRealPath(logoPathDir); /** 根据真实路径创建目录* */ File logoSaveFile = new File(logoRealPathDir); if (!logoSaveFile.exists()) logoSaveFile.mkdirs(); /** 页面控件的文件流* */ MultipartFile multipartFile = multipartRequest.getFile("file"); /** 获取文件的后缀* */ String suffix = multipartFile.getOriginalFilename().substring( multipartFile.getOriginalFilename().lastIndexOf(".")); /** 使用UUID生成文件名称* */ String logImageName = UUID.randomUUID().toString() + suffix;// 构建文件名称 /** 拼成完整的文件保存路径加文件* */ String fileName = logoRealPathDir + File.separator + logImageName; System.out.println("upload-》文件保存全路径" + fileName); File file = new File(fileName); try { FileCopyUtils.copy(mpf.getBytes(), new File(fileName)); System.out.println("上传成功！"); } catch (IOException e) { System.out.println("上传失败！"); e.printStackTrace(); } System.out.println("2.4 add to files"); files.add(fileMeta); System.out.println("success uploaded=" + files.size()); } return files; } 文章来源: https://blog.csdn.net/qq_38528283/article/details/88194899