layui+ajax实现表单字段验证、文件上传

建站1480 更新时间：2025-06-07 23:17:44

2023年6月21日发(作者：)

layui+ajax实现表单字段验证、⽂件上传本项⽬使⽤了ajax、ssm、layui。为了实现效果为在表单输⼊时判断该字段是否在数据库中存在以及⽂件上传的功能。如下图所⽰知识编号为21的值已经在数据库中存在，但是业务要求知识编号不能重复，所以在表单提交的时候⾸先需要判断该值是否存在。如果存在则提⽰重新输⼊知识编号字段验证⽂件上传且⽀持多⽂件上传。并提供缩略图。⽂件上传准备⼯作我们使⽤的框架是ssm即springMVC + spring + mybatis ，使⽤了maven来构建项⽬。并且使⽤了json解析格式。第⼀步：在⽂件引⼊依赖坐标 commons-fileupload commons-fileupload 1.3.3 a fastjson 1.2.68 tion jsr250-api 1.0 jackson-core 2.9.8 jackson-databind 2.9.8 jackson-annotations 2.9.8 第⼆步：在spirng的配置⽂件⽂件中引⼊⽂件上传所需的multipartResolver对象第三步：在spirngmvc的配置⽂件⽂件中配置json text/html; charset=UTF-8 application/json;charset=UTF-8 text/html; charset=UTF-8 application/json;charset=UTF-8 到这⾥准备⼯作完毕，下⾯开始进⾏业务前端界⾯前端使⽤的是JSP界⾯，使⽤的layui前端框架快速搭建由于在这个页⾯，使⽤了表单数据验证、⽂件上传、表单提交表单样式

ajax使⽤在js这⾥，因为我们使⽤了layui。所以我们⾸先提供([可选模块],function{})⽅法引⼊模块。再定义layui模块使⽤函数在ajax⾥，我们需要配置以下：// 调⽤ajax进⾏异步提交 $.ajax({ type: 'post', dataType: "json", url: '', // 你的url地址 //async: true, 是否开启异步操作，默认为ture，为异步调⽤。false为同步调⽤ data: {}, // 需要传输到后台的数据 success: function (res) { // 异步操作执⾏成功后调⽤的⽅法 }, error: function (err) { // 异步操作执⾏错误后调⽤的⽅法 } }); return false; // 关闭操作，否则⽆法刷新数据 });注意：使⽤ajax通常会遇到⼏个问题：1.使⽤ajax向后台传参问题：data这⾥使⽤的是key：value的传参⽅式。⽐如后台springMVC的控制层需要获取userId的值。则data定义为：data: { userId: value // value为前端参数}data⾥⾯的key需要与后台接收参数定义⼀致，否则后台⽆法接收参数后台如果需要通过对象的形式获取参数，例如异步表单提交。则data定义为：data: { user: { userId : value name: value }}2.使⽤ajax后，后台控制层执⾏⽅法成功，但就是不调⽤success⽅法，⼀直调⽤error⽅法。原因：后台返回的参数不是json类型。由于ajax规定后台参数必须是json类型，如果返回的参数（列表，对象）都正确，因为不是json类型，则⼀样调⽤error⽅法。解决：后台使⽤map返回,使⽤@ResponseBody注解 @RequestMapping("拦截路径") @ResponseBody public Object findByMId(String mId) throws Exception { HashMap map = new HashMap<>(); // ⽅法省略 return map; }js代码 $('#previewImages').append(' knowledge1 = KId(KId); n(knowledge1); if (()==0) { return true; } } n("知识编号存在"); return false; }- 业务2：⽂件上传（⽀持多⽂件）。controller这⾥通过MultipartFile 接收⼀个file对象，注意不是数组[]类型，因为在layui⾥，上传⽂件是单独调⽤。⼀个⽂件上传就调⽤⼀次上传⽂件的⽅法。如果是三个⽂件上传，那么就调⽤三次⽂件上传的⽅法。 /** * 上传知识⽂件 */ @RequestMapping("/") @ResponseBody @CrossOrigin public int uploadFile(@RequestParam("file") MultipartFile file , String kId) throws Exception { int code = -1; if (file != null) { code = File(file,kId); } return code; }serviec这⾥使⽤⽂件上传⼯具类/** * 上传⽂件 * * @param file * @param kId */ @Override public int uploadFile(MultipartFile file, String kId) throws Exception { int code = -1; String path = "D:ideaTestFileknowpay"; if (!"".equals(kId) && kId != null) { // 获取⽂件名 String fileName = ginalFilename(); if (fileName != null) { // 上传⽂件 upLoadUtil(path,fileName,file); // 获取⽂件类型（后缀） String[] splitStr = ("."); String suffix = splitStr[ - 1]; // 获取⽂件路径 String filePath = path + "" +fileName; // 保存数据库 KnowledgeFile knowledgeFile = new KnowledgeFile(); (kId); me(fileName); pe(suffix); th(filePath); wledgeFile(knowledgeFile); code = 0; } } return code; }FileUtils⽂件操作⼯具类package ;import artFile;import O;import rvletResponse;import edImage;import .*;import oder;/** * ⽂件操作⼯具类 */ */public class FileUtils { /** * 上传⽂件⼯具 * * @param UPLOAD_FILES_PATH 上传路径 * @param fileName ⽂件名称 * @param file ⽂件 */ public static Boolean upLoadUtil(String UPLOAD_FILES_PATH, String fileName, MultipartFile file) throws IOException { if (y()) { return false; } else { File dest = new File(UPLOAD_FILES_PATH + "/" + fileName); //判断⽂件⽗⽬录是否存在 if (!entFile().exists()) { entFile().mkdirs(); } erTo(dest); } return true; } /** * 下载⽂件⼯具 * * @param response response对象 * @param realPath ⽂件路径 * @param fileName ⽂件名称 */ public static void downloadUtil(final HttpServletResponse response, String realPath, String fileName) throws IOException { File file = new File(realPath); if (()) { der("content-type", "application/octet-stream"); tentType("application/octet-stream"); // 下载⽂件能正常显⽰中⽂ try { der("Content-Disposition", "attachment;filename=" + (fileName, "UTF-8")); } catch (UnsupportedEncodingException e) { tackTrace(); } // 实现⽂件下载 byte[] buffer = new byte[1024]; FileInputStream fis = null; BufferedInputStream bis = null; try { fis = new FileInputStream(file); bis = new BufferedInputStream(fis); OutputStream os = putStream(); int i = (buffer); while (i != -1) { (buffer, 0, i); i = (buffer); } } catch (Exception e) { tackTrace(); } finally { assert bis != null; (); (); } } } /** * 删除⽂件夹 * * @param sPath ⽂件夹路径 */ public static boolean DeleteFolder(String sPath) { boolean flag = false; File file = new File(sPath); // 判断⽬录或⽂件是否存在 if (!()) { // 不存在返回 false return flag; } else { // 判断是否为⽂件 if (()) { // 为⽂件时调⽤删除⽂件⽅法 return deleteFile(sPath); } else { // 为⽬录时调⽤删除⽬录⽅法 return deleteDirectory(sPath); } } } /** * 删除单个⽂件 * * @param sPath 被删除⽂件的⽂件名 * @return 单个⽂件删除成功返回true，否则返回false */ public static boolean deleteFile(String sPath) { boolean flag = false; File file = new File(sPath); // 路径为⽂件且不为空则进⾏删除 if (() && ()) { (); flag = true; } return flag; } /** * 删除⽬录（⽂件夹）以及⽬录下的⽂件 * * @param sPath 被删除⽬录的⽂件路径 * @return ⽬录删除成功返回true，否则返回false */ public static boolean deleteDirectory(String sPath) { //如果sPath不以⽂件分隔符结尾，⾃动添加⽂件分隔符 if (!th(tor)) { sPath = sPath + tor; } File dirFile = new File(sPath); //如果dir对应的⽂件不存在，或者不是⼀个⽬录，则退出 if (!() || !ctory()) { return false; } boolean flag = true; //删除⽂件夹下的所有⽂件(包括⼦⽬录) File[] files = les(); for (int i = 0; i < ; i++) { //删除⼦⽂件 if (files[i].isFile()) { flag = deleteFile(files[i].getAbsolutePath()); if (!flag) { break; } } //删除⼦⽬录 else { flag = deleteDirectory(files[i].getAbsolutePath()); if (!flag) { break; } } } if (!flag) { return false; } //删除当前⽬录 if (()) { return true; } else { } else { return false; } } /** * 转⽂件格式 * * @param img 照⽚⽂件 */ public static byte[] fileToByte(File img) throws Exception { byte[] bytes = null; ByteArrayOutputStream baos = new ByteArrayOutputStream(); try { BufferedImage bi; bi = (img); (bi, "jpg", baos); bytes = Array(); } catch (Exception e) { // tackTrace(); } finally { // 关闭输出流 (); } return bytes; }}

2023年6月21日发(作者：)

layui+ajax实现表单字段验证、⽂件上传本项⽬使⽤了ajax、ssm、layui。为了实现效果为在表单输⼊时判断该字段是否在数据库中存在以及⽂件上传的功能。如下图所⽰知识编号为21的值已经在数据库中存在，但是业务要求知识编号不能重复，所以在表单提交的时候⾸先需要判断该值是否存在。如果存在则提⽰重新输⼊知识编号字段验证⽂件上传且⽀持多⽂件上传。并提供缩略图。⽂件上传准备⼯作我们使⽤的框架是ssm即springMVC + spring + mybatis ，使⽤了maven来构建项⽬。并且使⽤了json解析格式。第⼀步：在⽂件引⼊依赖坐标 commons-fileupload commons-fileupload 1.3.3 a fastjson 1.2.68 tion jsr250-api 1.0 jackson-core 2.9.8 jackson-databind 2.9.8 jackson-annotations 2.9.8 第⼆步：在spirng的配置⽂件⽂件中引⼊⽂件上传所需的multipartResolver对象第三步：在spirngmvc的配置⽂件⽂件中配置json text/html; charset=UTF-8 application/json;charset=UTF-8 text/html; charset=UTF-8 application/json;charset=UTF-8 到这⾥准备⼯作完毕，下⾯开始进⾏业务前端界⾯前端使⽤的是JSP界⾯，使⽤的layui前端框架快速搭建由于在这个页⾯，使⽤了表单数据验证、⽂件上传、表单提交表单样式

ajax使⽤在js这⾥，因为我们使⽤了layui。所以我们⾸先提供([可选模块],function{})⽅法引⼊模块。再定义layui模块使⽤函数在ajax⾥，我们需要配置以下：// 调⽤ajax进⾏异步提交 $.ajax({ type: 'post', dataType: "json", url: '', // 你的url地址 //async: true, 是否开启异步操作，默认为ture，为异步调⽤。false为同步调⽤ data: {}, // 需要传输到后台的数据 success: function (res) { // 异步操作执⾏成功后调⽤的⽅法 }, error: function (err) { // 异步操作执⾏错误后调⽤的⽅法 } }); return false; // 关闭操作，否则⽆法刷新数据 });注意：使⽤ajax通常会遇到⼏个问题：1.使⽤ajax向后台传参问题：data这⾥使⽤的是key：value的传参⽅式。⽐如后台springMVC的控制层需要获取userId的值。则data定义为：data: { userId: value // value为前端参数}data⾥⾯的key需要与后台接收参数定义⼀致，否则后台⽆法接收参数后台如果需要通过对象的形式获取参数，例如异步表单提交。则data定义为：data: { user: { userId : value name: value }}2.使⽤ajax后，后台控制层执⾏⽅法成功，但就是不调⽤success⽅法，⼀直调⽤error⽅法。原因：后台返回的参数不是json类型。由于ajax规定后台参数必须是json类型，如果返回的参数（列表，对象）都正确，因为不是json类型，则⼀样调⽤error⽅法。解决：后台使⽤map返回,使⽤@ResponseBody注解 @RequestMapping("拦截路径") @ResponseBody public Object findByMId(String mId) throws Exception { HashMap map = new HashMap<>(); // ⽅法省略 return map; }js代码 $('#previewImages').append(' knowledge1 = KId(KId); n(knowledge1); if (()==0) { return true; } } n("知识编号存在"); return false; }- 业务2：⽂件上传（⽀持多⽂件）。controller这⾥通过MultipartFile 接收⼀个file对象，注意不是数组[]类型，因为在layui⾥，上传⽂件是单独调⽤。⼀个⽂件上传就调⽤⼀次上传⽂件的⽅法。如果是三个⽂件上传，那么就调⽤三次⽂件上传的⽅法。 /** * 上传知识⽂件 */ @RequestMapping("/") @ResponseBody @CrossOrigin public int uploadFile(@RequestParam("file") MultipartFile file , String kId) throws Exception { int code = -1; if (file != null) { code = File(file,kId); } return code; }serviec这⾥使⽤⽂件上传⼯具类/** * 上传⽂件 * * @param file * @param kId */ @Override public int uploadFile(MultipartFile file, String kId) throws Exception { int code = -1; String path = "D:ideaTestFileknowpay"; if (!"".equals(kId) && kId != null) { // 获取⽂件名 String fileName = ginalFilename(); if (fileName != null) { // 上传⽂件 upLoadUtil(path,fileName,file); // 获取⽂件类型（后缀） String[] splitStr = ("."); String suffix = splitStr[ - 1]; // 获取⽂件路径 String filePath = path + "" +fileName; // 保存数据库 KnowledgeFile knowledgeFile = new KnowledgeFile(); (kId); me(fileName); pe(suffix); th(filePath); wledgeFile(knowledgeFile); code = 0; } } return code; }FileUtils⽂件操作⼯具类package ;import artFile;import O;import rvletResponse;import edImage;import .*;import oder;/** * ⽂件操作⼯具类 */ */public class FileUtils { /** * 上传⽂件⼯具 * * @param UPLOAD_FILES_PATH 上传路径 * @param fileName ⽂件名称 * @param file ⽂件 */ public static Boolean upLoadUtil(String UPLOAD_FILES_PATH, String fileName, MultipartFile file) throws IOException { if (y()) { return false; } else { File dest = new File(UPLOAD_FILES_PATH + "/" + fileName); //判断⽂件⽗⽬录是否存在 if (!entFile().exists()) { entFile().mkdirs(); } erTo(dest); } return true; } /** * 下载⽂件⼯具 * * @param response response对象 * @param realPath ⽂件路径 * @param fileName ⽂件名称 */ public static void downloadUtil(final HttpServletResponse response, String realPath, String fileName) throws IOException { File file = new File(realPath); if (()) { der("content-type", "application/octet-stream"); tentType("application/octet-stream"); // 下载⽂件能正常显⽰中⽂ try { der("Content-Disposition", "attachment;filename=" + (fileName, "UTF-8")); } catch (UnsupportedEncodingException e) { tackTrace(); } // 实现⽂件下载 byte[] buffer = new byte[1024]; FileInputStream fis = null; BufferedInputStream bis = null; try { fis = new FileInputStream(file); bis = new BufferedInputStream(fis); OutputStream os = putStream(); int i = (buffer); while (i != -1) { (buffer, 0, i); i = (buffer); } } catch (Exception e) { tackTrace(); } finally { assert bis != null; (); (); } } } /** * 删除⽂件夹 * * @param sPath ⽂件夹路径 */ public static boolean DeleteFolder(String sPath) { boolean flag = false; File file = new File(sPath); // 判断⽬录或⽂件是否存在 if (!()) { // 不存在返回 false return flag; } else { // 判断是否为⽂件 if (()) { // 为⽂件时调⽤删除⽂件⽅法 return deleteFile(sPath); } else { // 为⽬录时调⽤删除⽬录⽅法 return deleteDirectory(sPath); } } } /** * 删除单个⽂件 * * @param sPath 被删除⽂件的⽂件名 * @return 单个⽂件删除成功返回true，否则返回false */ public static boolean deleteFile(String sPath) { boolean flag = false; File file = new File(sPath); // 路径为⽂件且不为空则进⾏删除 if (() && ()) { (); flag = true; } return flag; } /** * 删除⽬录（⽂件夹）以及⽬录下的⽂件 * * @param sPath 被删除⽬录的⽂件路径 * @return ⽬录删除成功返回true，否则返回false */ public static boolean deleteDirectory(String sPath) { //如果sPath不以⽂件分隔符结尾，⾃动添加⽂件分隔符 if (!th(tor)) { sPath = sPath + tor; } File dirFile = new File(sPath); //如果dir对应的⽂件不存在，或者不是⼀个⽬录，则退出 if (!() || !ctory()) { return false; } boolean flag = true; //删除⽂件夹下的所有⽂件(包括⼦⽬录) File[] files = les(); for (int i = 0; i < ; i++) { //删除⼦⽂件 if (files[i].isFile()) { flag = deleteFile(files[i].getAbsolutePath()); if (!flag) { break; } } //删除⼦⽬录 else { flag = deleteDirectory(files[i].getAbsolutePath()); if (!flag) { break; } } } if (!flag) { return false; } //删除当前⽬录 if (()) { return true; } else { } else { return false; } } /** * 转⽂件格式 * * @param img 照⽚⽂件 */ public static byte[] fileToByte(File img) throws Exception { byte[] bytes = null; ByteArrayOutputStream baos = new ByteArrayOutputStream(); try { BufferedImage bi; bi = (img); (bi, "jpg", baos); bytes = Array(); } catch (Exception e) { // tackTrace(); } finally { // 关闭输出流 (); } return bytes; }}

本文发布于:2023-06-21，感谢您对本站的认可！

本文链接:http://torson.com.cn/news/1687319203a1840.html