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()]);

}

}

```

好了，按照以上的步骤大家应该能够配置的好了。