使用 Dropzone 上传图片

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

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

一、直接使用form标签

<form action="/photo/upload" class="dropzone" enctype="multipart/form-data"></form>

这种方式中,使用了类dropzone会在前端自动初始化一个默认样式。如下:
在这里插入图片描述
然后点击白色区域或者直接拖拽图片到白色区域,即可触发上传。如下图:
在这里插入图片描述
二、在js中构建dropzone对象
这种方式适合自定义的上传,如果不想使用默认的上传样式,那么可以自己创建dropzone对象并进行相关配置。官网给的属性比较多,按需。下面给出三个代表性的属性配置,仅做参考:

<!--dropzone 图片上传表单-->
<form class="upload-form" id="photoForm"></form>
<!--dropzone 自定义预览位置-->
<div class="dropzone-previews" id="dropZonePreview" style="width: 100%;height: 200px;"></div>
function checkPhotoUploadStatus()
{
    var photoDropzone = new Dropzone("form#photoForm", {
        url: "/photo/upload",
        //自定义预览模版 其他相似属性可作参照
        previewTemplate: "<div class=\"dz-preview dz-file-preview\">" +
        "<div class=\"dz-details\">" +
        "    <div class=\"dz-filename\"><span data-dz-name></span></div>" +
        "    <div class=\"dz-size\" data-dz-size></div>" +
        "    <img data-dz-thumbnail />" +
        "  </div>" +
        "  <div class=\"dz-progress\"><span class=\"dz-upload\" data-dz-uploadprogress></span></div>" +
        "</div>"
    });
    //自定义预览位置 其他相似属性可作参照
    photoDropzone.previewsContainer = document.getElementById("dropZonePreview");//这里不能使用JQuery选择器
    //当图片上传成功时执行 其他相似方法可作参考
    photoDropzone.on("success", function (result) {
            });
}
$(function () {
    //检查图片上传状态
    checkPhotoUploadStatus();
});

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值