AWLDropzone AWL文件上传工具

AWL文件上传工具主要实现图片文件的上传。

使用时需要导入的依赖：

<!-- 在浏览器顶部导入 -->
<script src="assets/js/jquery321.min.js"></script>
<script src="AWLFrame/AWLCore.js"></script>
<script src="AWLFrame/AWLConst.js"></script>
<script src="AWLFrame/AWLDialog.js"></script>
<script src="AWLFrame/AWLHttp.js"></script>

<!-- 在文档底部导入 -->
<script src="assets/js/vendor/dropzone.min.js"></script>
<script src="AWLFrame/AWLFileUpload.js"></script>
<script src="您的JS处理文件.js"></script>

AWLDateUtil中包含的方法：

| 方法 | 参数 | 作用 |
| ---------------- | ---------------- | ----------------------- |
| generateConfig | () | //生成上传配置对象，在bindDropzone之前必须调用该方法。 |
| bindDropzone | (conf, fileUploadCallBack) | //参数1是生成的配置对象，参数2是文件上传成功的回调函数，会返回图片的ID和图片的相对地址。 |

示例：

//第一步：生成并配置配置文件
var conf = AWLDropzone.generateConfig();
conf.containerId = "uploadNewsImg";// 图片上传对象的ID
conf.previewsId = "uploadNewsImgPreviews";// 图片预览对象的ID
conf.templateId = "uploadNewsImgTemplate";// 图片预览模板的ID
/*****conf中的全部参数
*	{
*			containerId: "none", // 图片上传对象的ID
*			previewsId: "none", // 图片预览对象的ID
*			templateId: "none", // 图片预览模板的ID
*			acceptedFiles: ".jpg,.gif,.png", // 允许输入的文件类型
*			maxFiles: 1, // 最大上传文件个数
*			maxFilesize: 20, // 单个文件最大限制，单位MB
*			type: imgUploadType.ARTICLE //图片文件的类型，使用imgUploadType枚举对象
* }
****/
	 //第二部：绑定上传对象
AWLDropzone.bindDropzone(conf, function (data) {
    console.log(data);
    var path = data.path;
    $("#uploadNewsImgPreviews div img").attr("src", serverURL + "image" + path);
});

HTML模板:

<!-- 图片上传按钮表单对象 -->
<form action="/" method="post" class="dropzone" id="图片上传对象的ID"
      data-plugin="dropzone" data-previews-container="#图片预览对象的ID"
      data-upload-preview-template="#图片预览模板的ID">
    <div class="fallback">
        <input name="file" type="file" multiple/>
    </div>

    <div class="dz-message needsclick">
        <i class="h1 text-muted dripicons-cloud-upload"></i>
        <h3>选择检测报告图片.</h3>
        <span class="text-muted font-13">（点击此处以上传检测报告图片,您也可以拖动文件到此处）</span>
    </div>
</form>

<!-- 图片预览显示对象 -->
<div class="dropzone-previews mt-3" id="图片预览对象的ID"></div>
<!-- 图片预览模板 -->
<div class="d-none" id="图片预览模板的ID">
    <div class="card mt-1 mb-0 shadow-none border">
        <div class="p-2">
            <div class="row align-items-center">
                <div class="col-auto">
                    <img data-dz-thumbnail
                         class="avatar-sm rounded bg-light" alt="">
                </div>
                <div class="col pl-0">
                    <a href="javascript:void(0);"
                       class="text-muted font-weight-bold"
                       data-dz-name></a>
                    <p class="mb-0" data-dz-size></p>
                </div>
                <div class="col-auto">
                    <!-- Button -->
                    <a href="" class="btn btn-link btn-lg text-muted"
                       data-dz-remove>
                        <i class="dripicons-cross"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div> <!-- end file preview template -->

AWLFileUpload 文件交互