使用 Dropzone 上传图片

Dropzone 是什么不介绍了~搜索找到官网，然后引入外部文件就可以用了。

这种类型的控件只要构建好对象，基本就可以使用上传方法了。下面有两种方法：

一、直接使用form标签

这种方式中，使用了类dropzone会在前端自动初始化一个默认样式。如下：

然后点击白色区域或者直接拖拽图片到白色区域，即可触发上传。如下图：

二、在js中构建dropzone对象
这种方式适合自定义的上传，如果不想使用默认的上传样式，那么可以自己创建dropzone对象并进行相关配置。官网给的属性比较多，按需。下面给出三个代表性的属性配置，仅做参考：

function checkPhotoUploadStatus()
{
    var photoDropzone = new Dropzone("form#photoForm", {
        url: "/photo/upload",
        //自定义预览模版 其他相似属性可作参照
        previewTemplate: "
" +
        "
" +
        "    
" +
        "    
" +
        "    " +
        "  
" +
        "  
" +
        "
"
    });
    //自定义预览位置 其他相似属性可作参照
    photoDropzone.previewsContainer = document.getElementById("dropZonePreview");//这里不能使用JQuery选择器
    //当图片上传成功时执行 其他相似方法可作参考
    photoDropzone.on("success", function (result) {
            });
}

$(function () {
    //检查图片上传状态
    checkPhotoUploadStatus();
});

使用自定义的预览位置，上传的预览图片就没有方法一中的美观了，需要自己调整~