dropzone.js php,超详细版Dropzone.js上传插件的使用实例-适用tp
其实一直都再找一款上传插件，但是今天遇到了一款相对比较好的插件，干净纯洁。
[](https://cdn.micuer.com/data/upload/20210121/60091f0d95453.png)
这是一款轻量级的上传插件，使用相对也比较简单，大家按照我给的代码基本都能配置成功。
##首先附上官方文档
https://www.dropzonejs.com/
###下面是使用案例
1：引用js、css
2：准备html
```
```
3:js初始化
```
Dropzone.myAwesomeDropzone = false; //自己手动初始化 myAwesomeDropzone对应上述html中的id
var drop_zone = new Dropzone("#myAwesomeDropzone", {
//paramName: "files",
url: "{:url('Upload/Dropzone')}", //file upload url
method: 'post',
uploadMultiple: true, //多个文件
maxFiles:10, //一次性上传的文件数量上限10M
maxFilesize: 20, // MB
//filesizeBase:20480,
parallelUploads: 100, //1次行上传100个文件
autoProcessQueue:true,//关闭自动上传功能，默认会true会自动上传,也就是添加一张图片向服务器发送一次请求
//添加上传取消和删除预览图片的链接，默认不添加
addRemoveLinks: true, //添加删除链接
dictResponseError: '文件上传失败!', //提示信息
dictFallbackMessage:"浏览器不受支持",
dictFileTooBig:"文件过大上传文件最大支持.",
dictInvalidInputType:'文件类型错误',
// addedfile:function (file) {
// console.log(file)
// },
success:function (file,res) {
console.log(file)
console.log(res)
}
// complete:function (file) {
// console.log(file)
// }
})
```
4:后台接受 - thinkphp6.0版本
```
public function Dropzone()
{
// 获取表单上传文件 例如上传了001.jpg
$file = request()->file();
try {
validate(['image'=>'filesize:10240|fileExt:jpg,gif,jpeg,png,ico|image:200,200,jpg'])
->check($file);
$file = request()->file("file");
$file = $file[0];
// 上传到本地服务器
$savename = \think\facade\Filesystem::disk('upload')->putFile( 'avatar', $file);
//$suoluetu1_name = $this->th($savename);
$savename = "/data/upload/".$savename; //Request::domain().
return json(["code"=>200,"msg"=>"成功","data"=>$savename]);
} catch (think\exception\ValidateException $e) {
return json(["code"=>40000,"msg"=>$e->getMessage()]);
}
}
```
好了，按照以上的步骤大家应该能够配置的好了。