formData上傳文件時，攜帶【數組對象參數】 · 工作篇

[TOC] >[success] # formData上傳文件時，攜帶【數組對象參數】在工作中經常會遇到用 **formData** 方式 **上傳文件** 時 **攜帶其它參數** 的情況，還有一種情況，前端需要使用 **formData** 的方式傳 **數組對象** 的 **參數** ，寫法如下： **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.js"></script> <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script> <script> $(function(){ // 獲取元素 const selectElement = document.querySelector('#file'); // 監聽 change 事件 selectElement.addEventListener('change', (event) => { // 實例化formData對象 const formData = new FormData() // 取得文件 const file = event.target.files[0] // 把文件添加到formData對象中 formData.append('file', file) // 給后臺傳入數組對象 formData.append('list[0].name', '小明') formData.append('list[1].name', '小黑') // 調用接口傳給后臺 $.ajax({ url: 'api.php', method: 'POST', contentType: false, processData: false, data: formData, success: function (res) { console.log(res) } }) }); }) </script> </head> <body> <input type="file" id="file"> </body> </html> ~~~