超详细版Dropzone.js上传插件的使用实例-适用tp

其实一直都再找一款上传插件，但是今天遇到了一款相对比较好的插件，干净纯洁。
[![](https://micuu.com/data/upload/20210121/60091f0d95453.png)](https://micuu.com/data/upload/20210121/60091f0d95453.png)

这是一款轻量级的上传插件，使用相对也比较简单，大家按照我给的代码基本都能配置成功。

##首先附上官方文档

https://www.dropzonejs.com/

###下面是使用案例

1：引用js、css

<link rel="stylesheet" href="https://cloud.qudong.com/static/assets/vendors/dropzone/dropzone.css" type="text/css">
	
	<script src="http:micuer.com/static/assets/vendors/dropzone/dropzone.js"></script>
	
2：准备html
```
<div class="dropzone dz-clickable" id="myAwesomeDropzone">
       <div class="dz-default dz-message"><span>点击上传或者将文件拖拽到这里</span></div>
</div>
```

3:js初始化
```
<script>
    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)
//        }
    })
</script>
```
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()]);
        }
    }
```

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

注:原创不易,转载请注明出处( https://micuu.com/new/1338.html )，本站所有资源来源于网络收集，如有侵权请联系QQ245557979进行清除。

超详细版Dropzone.js上传插件的使用实例-适用tp

留言反馈