爱站程序员基地本文实例为大家分享了jquery+springboot实现文件上传功能的具体代码，供大家参考，具体内容如下
前端
<!DOCTYPE html><html lang=\"zh\"><head><title></title><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><meta name=\"renderer\" content=\"webkit\"><meta http-equiv=\"Cache-Control\" content=\"max-age=21600\" /><meta http-equiv=\"Expires\" content=\"Mon, 18 Aug 2014 23:00:00 GMT\" /><meta name=\"keywords\" content=\"\"><meta name=\"description\" content=\"table/update.html\"></head><body><span>-----------form submit--------------</span><br><span>-----------单文件--------------</span><form action=\"/metadata/metaTables/single-file\" method=\"post\" enctype=\"multipart/form-data\"><input type=\"file\" name=\"meFile\" /><p><input type=\"submit\" value=\"提交\" /><input type=\"reset\" value=\"清空\" /><p></form><span>-----------单文件+参数->RequestParam接收参数</span>--------------</span><form action=\"/metadata/metaTables/single-file-param\" method=\"post\" enctype=\"multipart/form-data\"><input type=\"file\" name=\"meFile\" />name：<input name=\"name\"></input><p><input type=\"submit\" value=\"提交\" /><input type=\"reset\" value=\"清空\" /><p></form><span>-----------单文件+参数->对象接收参数</span>--------------</span><form action=\"/metadata/metaTables/single-file-object\" method=\"post\" enctype=\"multipart/form-data\"><input type=\"file\" name=\"meFile\" />aaa:<input name=\"aaa\"></input>bbb:<input name=\"bbb\"></input>ccc:<input name=\"ccc\"></input><p><input type=\"submit\" value=\"提交\" /><input type=\"reset\" value=\"清空\" /><p></form><span>-----------多文件（参数传递和单文件一致）--------------</span><form action=\"/metadata/metaTables/many-file\" method=\"post\" enctype=\"multipart/form-data\"><input type=\"file\" name=\"meFile\" multiple=\"multiple\" /><p><input type=\"submit\" value=\"提交\" /><input type=\"reset\" value=\"清空\" /><p></form><span>------------文件夹(文件夹下的所有文件)-------------</span><form action=\"/metadata/metaTables/dir\" method=\"post\" enctype=\"multipart/form-data\"><input type=\"file\" name=\"meFile\" webkitdirectory directory /><p><input type=\"submit\" value=\"提交\" /><input type=\"reset\" value=\"清空\" /><p></form><span>------------Ajax通过FormData上传文件-------------</span><br><span>------------1.使用form表单初始化FormData对象方式上传文件-------------</span><br><form id=\"ajax_formdata\">aaa:<input name=\"aaa\" value=\"1\"></input>bbb:<input name=\"bbb\" value=\"2\"></input>ccc:<input name=\"ccc\" value=\"3\"></input>input<input id=\"ajax_formdata_file\" type=\"file\" name=\"meFile\"/><p><button onclick=\"save()\">单input提交</button><button onclick=\"remove1()\">清空1</button><button onclick=\"remove2()\">清空2</button><p></form><span>------------2.使用FormData对象添加字段方式上传文件-------------</span><form id=\"ajax_formdata1\">aaa:<input name=\"aaa\" value=\"4\"></input>bbb:<input name=\"bbb\" value=\"5\"></input>ccc:<input name=\"ccc\" value=\"6\"></input>input<input id=\"ajax_formdata_file1\" type=\"file\" name=\"meFile\"/>多文件提交<input id=\"ajax_formdata_file2\" type=\"file\" name=\"meFile\" multiple=\"multiple\"/>input<input id=\"ajax_formdata_file3\" type=\"file\" name=\"meFile\"/><p><button onclick=\"save1()\">单input提交</button><button onclick=\"save2()\">多文件提交</button><button onclick=\"save3()\">多input提交</button><button onclick=\"remove1()\">清空1</button><button onclick=\"remove2()\">清空2</button></p></form><strong>后端MultipartFile怎么接受，看前端formData.append 怎么构建</strong><br><strong>formData.append(\"meFile\", File对象)-->MultipartFile</strong><br><strong>formData.append(\"meFile\", 多File对象)-->MultipartFile[]</strong><script src=\"../../assets/hplus/js/jquery.min.js?v=2.1.4\"></script><script src=\"../../assets/jquery.form.js\"></script><script>function save(){var formData = new FormData($(\'#ajax_formdata\')[0]);$.ajax({url: \'/metadata/metaTables/ajax-formdata\',type: \"post\",data: formData,contentType: false,processData: false,success: function (data) {alert(\"success\")}});}function save1(){var formData = new FormData();var formJson = $(\'#ajax_formdata1\').serializeJson();formData.append(\"num\", 110)formData.append(\"test\", JSON.stringify(formJson))formData.append(\"meFile\", $(\'#ajax_formdata_file1\')[0].files[0]);$.ajax({url: \'/metadata/metaTables/ajax-formdata1\',type: \"post\",data: formData,contentType: false,processData: false,success: function (data) {alert(\"success\")}});}function save2(){var formData = new FormData();formData.append(\"test\", JSON.stringify({\'aaa\':111,\'bbb\':222,\'ccc\':333}))for(var f of $(\'#ajax_formdata_file2\')[0].files)formData.append(\"meFile\", f);$.ajax({url: \'/metadata/metaTables/ajax-formdata2\',type: \"post\",data: formData,contentType: false,processData: false,success: function (data) {alert(\"success\")}});}function save3(){debuggervar formData = new FormData();formData.append(\'num\',123456)for(let i=0;i<$(\'#ajax_formdata1 input[type=\"file\"]\').length;i++){for(let j=0;j<$(\'#ajax_formdata1 input[type=\"file\"]\')[i].files.length;j++){formData.append(\"meFile\", $(\'#ajax_formdata1 input[type=\"file\"]\')[i].files[j]);}}$.ajax({url: \'/metadata/metaTables/ajax-formdata3\',type: \"post\",data: formData,contentType: false,processData: false,success: function (data) {alert(\"success\")}});}function remove1(){alert(\"通过替换input实现\")//第二种：var obj = document.getElementById(\'ajax_formdata_file\') ;obj.outerHTML=obj.outerHTML;}function remove2(){alert(\"clear方法\")//第一种:var obj = document.getElementById(\'ajax_formdata_file\') ;obj.select();document.selection.clear();}(function ($) {$.fn.serializeJson = function () {var serializeObj = {};var array = this.serializeArray();var str = this.serialize();$(array).each(function () {if (serializeObj[this.name]) {if ($.isArray(serializeObj[this.name])) {serializeObj[this.name].push(this.value);} else {serializeObj[this.name] = [serializeObj[this.name], this.value];}} else {serializeObj[this.name] = this.value;}});return serializeObj;};})(jQuery);</script></body></html>
后端
@RestController@RequestMapping({ \"/metadata/metaTables\" })public class MetaTablesController{@PostMapping(\"single-file\")public void singleFile(@RequestParam(\"meFile\")MultipartFile multipartFile){System.out.println();}@PostMapping(\"single-file-param\")public void singleFile(@RequestParam(\"meFile\")MultipartFile multipartFile,@RequestParam(\"name\")String name){System.out.println();}@PostMapping(\"single-file-object\")public void singleFile(@RequestParam(\"meFile\") MultipartFile multipartFile, Test test){System.out.println();}@PostMapping(\"many-file\")public void manyFile(@RequestParam(\"meFile\")MultipartFile[] multipartFile){System.out.println();}@PostMapping(\"dir\")public void dir(@RequestParam(\"meFile\")MultipartFile[] multipartFile){System.out.println();}@PostMapping(\"ajax-formdata\")public void ajaxFormData(@RequestParam(\"meFile\")MultipartFile multipartFile, Test test){System.out.println();}//对象接收用@RequestPart 传递json字符串，其他用 @RequestParam@PostMapping(\"ajax-formdata1\")public void ajaxFormData1(@RequestParam(\"meFile\")MultipartFile multipartFile, @RequestPart(\"test\") Test test, @RequestParam(\"num\")int num){System.out.println();}@PostMapping(\"ajax-formdata2\")public void ajaxFormData2(@RequestParam(\"meFile\")MultipartFile[] multipartFile,@RequestPart(\"test\") Test test){System.out.println();}@PostMapping(\"ajax-formdata3\")public void ajaxFormData3(@RequestParam(\"meFile\")MultipartFile[] multipartFile, @RequestParam(\"num\")int num){System.out.println();}}
以上就是本文的全部内容，希望对大家的学习有所帮助
