使用 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();
});

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

使用 Dropzone 上传图片相关推荐

使用Dropzone上传图片及回显示例
一.图片上传所涉及到的问题 1.HTML页面中引入这么一段代码 <div class="row"><div class="col-md-12" ...
千锋Java高级教程+分布式+springcloud+微信支付课程
课程目录: ├─千锋Java高级教程-cas单点登录(完结-8集) │ 01单点登录介绍 │ 02cas介绍 │ 03tomcat搭建https │ 04cas server搭建 │ 05Cas 配置 ...
视频教程-Java微服务架构-Java
Java微服务架构十余年计算机技术领域从业经验,在中国电信.盛大游戏等多家五百强企业任职技术开发指导顾问,国内IT技术发展奠基人之一. 杨千锋 ¥208.00 立即订阅扫码下载「CSDN程序员学院 ...
ajax 批量上传图片插件,jQuery多文件上传插件jquery.imageuploader.js
插件描述:jQuery多文件上传插件jquery.imageuploader.js,可以同时上传多个文件并支持拖拽上传 jquery.imageuploader.js 一款jquery多文件上传插件. ...
Dropzone使用总结
前几天,公司后台接手做了一下啊,其中有项功能是需要上传图片等数据.在此使用了dropzone框架,现来总结一下使用该框架和在使用过程中所遇到的问题. 先放上dropzone官网,http://www. ...
JQuery插件秀：生成PDF文件（文本+上传图片+电子签名）
前言需求如下:根据 docx 模板形成页面,让用户直接填写相关信息,在线生成 PDF 文件,无需用户下载 docx 模板填完信息再转为 PDF. 填写信息包括普通文本.上传图片.在线电子签名. 方案 ...
上传插件dropzone.js实例
dropzone.js默认是Ajax上传图片给服务器,那么如何获取到图片名呢?其实我们是可以通过dropzone的success函数获取到服务器返回的数据 dropzone.js在HTML的配置如下: ...
【JS插件】DropZone
简述 DropZone 是一款JavaScript 文件拖拽上传插件,提供Ajax异步上传功能. 目录结构: DropZone 前端导入CSS和JS文件: <!-- Drop Zone--&g ...
Dropzone插件的使用（从前台到后台完整流程）
目录 Dropzone插件的使用 1. 下载Dropzone 2. 引入jQuery和Dropzone所需JS 3.在前端JS代码中初始化Dropzone对象 4.后端接收文件并返回文件名效果显示 ...

使用 Dropzone 上传图片

使用 Dropzone 上传图片相关推荐

最新文章

热门文章