Dropzone 拖拽上传

简介

DropZonejs是Github社区受欢迎的拖拽上传插件，不依赖第三方库，为了统一样式定义本框架在v5.7.0版本基础上进行了修改，使之更方便使用，更符合中国开发者习惯。官网地址请点击这里，Github地址请点击这里。

本框架版本的Dropzonejs模板制作说明：

data-fancybox 表示创建缩略图链接
data-thumbnail 表示创建缩略图图片
data-image 表示创建缩略图背景
data-progress 表示创建缩略图反向加载
data-percent 表示创建缩略图正向加载（取整）
data-errormessage 表示错误信息内容
data-size 表示图片大小，单位MB
data-name 表示文件名

运行条件

页面引入ax.css和ax.js之后还需要引入以下文件。建议将js文件在文档底部引用。

                                <script src="https://src.axui.cn/v2.0/dist/plugins/dropzone/v5.7.0-ax/js/dropzone.js" type="text/javascript"></script>
                                <link href="https://src.axui.cn/v2.0/dist/plugins/dropzone/v5.7.0-ax/css/dropzone.css" rel="stylesheet" type="text/css">

可以自由制作模板，模板举例如下：

<div id="template01" style="display: none;">
    <li>
        <div class="ax-item">
            <div class="ax-operate"><a href="###" data-fancybox="upload" target="_blank"><i class="ax-iconfont ax-icon-eye"></i></a></div>
            <div class="ax-preview">
                <div class="ax-image" data-image="">
                    <div class="ax-progress" data-progress=""></div>
                    <div class="ax-percent" data-percent=""></div>
                    <div class="ax-success-mark"><i class="ax-iconfont ax-icon-check"></i></div>
                    <div class="ax-error-mark"><i class="ax-iconfont ax-icon-close"></i></div>
                    <div class="ax-error-message" data-errormessage=""></div>
                </div>
                <div class="ax-details">
                    <div class="ax-size" data-size=""></div>
                    <div class="ax-filename" data-name=""></div>
                </div>
            </div>
        </div>
    </li>
</div>

JS HTML PHP

    <script type='text/javascript'>
    var myDropzone = new Dropzone("#upload01", {
        url: "ax-upload-script.php",
        previewTemplate: document.querySelector('#template01').innerHTML,
        paramName: "file",
        maxFilesize: 5,
        maxFiles: 5,
        addRemoveLinks: true,
        acceptedFiles: ".jpg,.png,.gif,.txt,.doc,.docx,.xsl,.xslx,.pdf",
    });
    </script>

                                        <div class="ax-dropzone-outer">
                                            <div class="ax-dropzone" id="upload01">
                                                <ul class="ax-grid ax-space-md"></ul>
                                            </div>
                                        </div>

                                        <div id="template01" style="display: none;">
                                            <li>
                                                <div class="ax-item">
                                                    <div class="ax-operate"><a href="###" data-fancybox="upload" target="_blank"><i class="ax-iconfont ax-icon-eye"></i></a></div>
                                                    <div class="ax-preview">
                                                        <div class="ax-image" data-image="">
                                                            <div class="ax-progress" data-progress=""></div>
                                                            <div class="ax-percent" data-percent=""></div>
                                                            <div class="ax-success-mark"><i class="ax-iconfont ax-icon-check"></i></div>
                                                            <div class="ax-error-mark"><i class="ax-iconfont ax-icon-close"></i></div>
                                                            <div class="ax-error-message" data-errormessage=""></div>
                                                        </div>
                                                        <div class="ax-details">
                                                            <div class="ax-size" data-size=""></div>
                                                            <div class="ax-filename" data-name=""></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                        </div>

$path = "upload/"; //上传目录

$extArr = array("jpg", "png", "gif", "txt", "doc","docx","pdf","xsl","xslx");

if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST"){
    $name = $_FILES['file']['name'];
    $size = $_FILES['file']['size'];

    if(empty($name)){
        echo '请选择要上传的图片';
        exit;
    }
    $ext = extend($name);
    if(!in_array($ext,$extArr)){
        echo '图片格式错误！';
        exit;
    }
    if($size>(100*1024)){
        echo '图片大小不能超过100KB';
        exit;
    }
    $image_name = time().rand(100,999).".".$ext;
    $tmp = $_FILES['file']['tmp_name'];
    if(move_uploaded_file($tmp, $path.$image_name)){
        echo 'ok';
    }else{
        echo '上传出错了！';
    }
    exit;
}

//获取文件类型后缀
function extend($file_name){
    $extend = pathinfo($file_name);
    $extend = strtolower($extend["extension"]);
    return $extend;
}