<!DOCTYPE html> <html lang="zh"> <head> <title></title> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0"> <meta 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 content=""> <meta 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" /> <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：<input></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" /> aaa:<input></input> bbb:<input></input> ccc:<input></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" 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" 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> aaa:<input value="1"></input> bbb:<input value="2"></input> ccc:<input value="3"></input> input<input type="file"/> <p> <button>单input提交</button> <button>清空1</button> <button>清空2</button> <p> </form> <span>------------2.使用FormData对象添加字段方式上传文件-------------</span> <form> aaa:<input value="4"></input> bbb:<input value="5"></input> ccc:<input value="6"></input> input<input type="file"/> 多文件提交<input type="file" multiple="multiple"/> input<input type="file"/> <p> <button>单input提交</button> <button>多文件提交</button> <button>多input提交</button> <button>清空1</button> <button>清空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=""></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(){ debugger var 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>
后端