dropzone.js上传文件保存到哪里了,如何提交到后台保存
时间: 2023-08-22 13:08:21 浏览: 119
多文件选择上传以及后台保存处理
5星 · 资源好评率100%
dropzone.js 上传的文件默认是保存在浏览器的缓存中,你可以通过设置 `autoProcessQueue` 属性为 `true`,即自动提交队列,将文件传输到服务器后端进行保存。
具体步骤如下:
1. 在 HTML 中设置一个 `form` 表单,设置 `enctype="multipart/form-data"`。
2. 创建一个 Dropzone 实例,并配置相关属性。例如:
```javascript
var myDropzone = new Dropzone("#my-dropzone", {
url: "/file/upload", // 文件上传的后台接口
autoProcessQueue: true, // 是否自动将文件传输到服务器
paramName: "file", // 文件参数名,后端可以通过这个参数名获取文件
maxFilesize: 2, // 最大文件大小限制
addRemoveLinks: true, // 添加移除文件链接
acceptedFiles: "image/*,application/pdf", // 允许上传的文件类型
dictDefaultMessage: "将文件拖到此处上传或者点击上传", // 默认提示信息
dictFallbackMessage: "您的浏览器不支持拖放文件上传", // 不支持拖放上传的提示信息
dictFileTooBig: "文件过大 ({{filesize}}MiB),最大上传大小: {{maxFilesize}}MiB.", // 文件过大的提示信息
dictInvalidFileType: "无法上传此类型的文件", // 不允许上传的文件类型的提示信息
dictResponseError: "服务器响应错误 {{statusCode}}.", // 服务器响应错误的提示信息
dictCancelUpload: "取消上传", // 取消上传按钮的提示信息
dictCancelUploadConfirmation: "您确定要取消上传吗?", // 确认取消上传的提示信息
dictRemoveFile: "移除文件", // 移除文件按钮的提示信息
dictMaxFilesExceeded: "只能上传 {{maxFiles}} 个文件", // 超过最大文件数量限制的提示信息
headers: {"Authorization": "Bearer " + token} // 设置请求头,例如 token
});
```
3. 在后端接口中,可以通过常规方式(如 PHP 中的 `move_uploaded_file` 函数)将文件保存到服务器中指定的路径。
例如:
```php
<?php
$targetDir = "/var/www/html/uploads/"; // 文件保存的目标路径
if (!empty($_FILES)) {
$tempFile = $_FILES["file"]["tmp_name"];
$targetFile = $targetDir . $_FILES["file"]["name"];
move_uploaded_file($tempFile, $targetFile); // 将文件从临时目录移动到目标路径
echo "success";
}
?>
```
4. 在前端中,可以监听 Dropzone 的 `success` 或 `error` 事件,以判断文件上传是否成功。例如:
```javascript
myDropzone.on("success", function(file, response) {
console.log(response); // 打印上传成功后的响应结果
});
myDropzone.on("error", function(file, errorMessage) {
console.log(errorMessage); // 打印上传失败的错误信息
});
```
以上是一个基本的使用 Dropzone.js 上传文件并保存到服务器的流程。
阅读全文