表单如下,class="dropzone" 用于 Dropzone.js 识别处理,id="zhizhao" 按需设置为了操作 dom 的时候能被方便的找到,action="/topic/upload/" 是后端对应的 route。

<form id="zhizhao" action="/topic/upload/" class="dropzone">
    <div class="dz-default dz-message">
        <span>将文件拖至此处或点击选择</span>
    </div>
</form>

在 js 脚本中采用 Dropzone.options.form_id 的形式配置表单:

<script type="text/javascript" src="js/dropzone.js"></script>
<script>
    // Dropzone 配置
    Dropzone.options.zhizhao = {
        maxFiles: 1,
        maxFilesize: 2,
        acceptedFiles: "image/jpg, image/png, image/gif",
    }
</script>

使用 success 获取上传上传成功的响应

根据文档中的说明,success 方法的第二参数即为后端返回的内容:

<script>
    // Dropzone 配置
    Dropzone.options.zhizhao = {
        maxFiles: 1,
        maxFilesize: 2,
        acceptedFiles: "image/jpg, image/png, image/gif",
        success: function(file, response) {
            console.log(response)
        }
    }
</script>