html文件上传添加额外参数,ajax实现文件上传,多文件上传,追加参数

这段代码展示了一个使用Ajax进行多文件上传的实现,通过jQuery选择文件并附带token参数发送POST请求到'bookController/uploadMult'接口。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

文件上传

指定文件名:

上传文件:

上传文件:

上传文件:

//获取token

var token = parent.window.document.getElementById("token").value;

function doUpload() {

var formData = new FormData();

formData.append("token", token);

formData.append("file1", $(‘#file1‘)[0].files[0]);

formData.append("file2", $(‘#file2‘)[0].files[0]);

formData.append("file3", $(‘#file3‘)[0].files[0]);

$.ajax({

url: ‘bookController/uploadMult‘ ,

type: ‘post‘,

data: formData,

cache: false,

processData: false,

contentType: false,

async: false

}).done(function(res) {

}).fail(function(res) {

});

}

### 使用 `new FormData()` 处理文件上传 #### 创建表单并关联 FormData 对象 为了使用 `new FormData()` 方法处理文件上传,首先需要有一个 HTML 表单来收集用户输入的数据。这个表单可以包含一个或多个 `<input type="file">` 元素用于选择要上传的文件。 ```html <form id="uploadForm"> <label for="files">Choose files:</label> <input type="file" id="files" name="files[]" multiple> <button type="submit">Upload</button> </form> ``` 当用户提交此表单时,可以通过 JavaScript 阻止默认行为,并手动创建一个新的 `FormData` 实例[^1]: ```javascript document.getElementById('uploadForm').addEventListener('submit', function(event) { event.preventDefault(); // Prevent the form from submitting via the browser's default mechanism const formData = new FormData(this); // Create a new FormData object associated with this form }); ``` #### 添加额外数据至 FormData 对象 除了自动从表单字段获取值外,还可以向 `FormData` 中追加其他键值对或者更多文件。这允许灵活地构建请求负载而无需修改原始HTML结构。 如果想要显式添加文件到已有的 `FormData` 对象里,则可利用 `append()` 方法: ```javascript const fileInput = document.querySelector('#files'); for (let i = 0; i < fileInput.files.length; ++i){ formData.append(`customFile${i}`, fileInput.files[i], fileInput.files[i].name); } // 或者更简洁的方式遍历 FileList 并附加到 FormData Array.from(fileInput.files).forEach((file, index) => formData.append(`anotherCustomKey[${index}]`, file)); ``` 上述代码片段展示了两种不同的方式将选定文件加入到 `formData` 变量中;一种是指定唯一的名称给每个附件 (`customFileX`) ,另一种则是采用数组形式命名 (`anotherCustomKey[]`). 这样做有助于服务器端解析接收到的内容. #### 发送带有文件的 AJAX 请求 最后一步就是通过 XMLHttpRequest 将封装好的 `FormData` 发送到指定 URL 上去完成实际的文件传输过程. 下面是一个完整的例子说明如何执行异步 POST 请求并将进度反馈显示出来: ```javascript function uploadFiles(url, formData) { let xhr = new XMLHttpRequest(); xhr.open("POST", url); // 设置响应类型为 JSON(如果有返回JSON) xhr.responseType = 'json'; // 监听加载事件以更新UI组件上的状态指示器 xhr.upload.addEventListener("progress", function(e) { if (e.lengthComputable) { console.log(`${(e.loaded / e.total * 100)}% completed`); } }); xhr.onload = () => { if (xhr.status === 200 || xhr.status === 201) { alert('Files uploaded successfully!'); } else { alert(`An error occurred while uploading your files (${xhr.statusText})`); } }; xhr.onerror = () => { alert('There was an error sending the request.'); } xhr.send(formData); } // 调用函数传递目标URL以及准备好的FormData实例作为参数. uploadFiles('/api/upload', formData); ``` 这段脚本定义了一个名为 `uploadFiles` 的辅助功能,它接受两个必需的参数——API 终结点路径和之前建立起来的 `FormData` 对象。 它还包含了基本错误处理逻辑,在遇到问题时会弹出警告框通知用户[^2].
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值