Dropzone 图片拖动 组件DEMO

dropzone 主要功能:支持拖动图片上传,提供图片预览,等功能 参考地址:http://www.dropzonejs.com

1.安装 npm install dropzone ,会下载一个dropzone
2.dropzone文件夹dist 下有两个文件一个dropzone.js 一个dropzone.css 将这两个文件添加到页面上
3.初始化Dropzone ,demo代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery.min.js"></script>
    <script src="dropzone.min.js"></script>
    <link rel="stylesheet" href="dropzone.css">
</head>
<body>
<div id="dropz" class="dropzone"></div>
<script>
    $(function () {
        $("#dropz").dropzone({
            url: "fileUpload.htm",
            maxFiles: 10,
            maxFilesize: 512,
            acceptedFiles: ".jpg"
        });
    })
</script>
</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Dropzone是一款开源的JavaScript库,可以使用它轻松地在网站或应用程序中实现文件拖放功能。Dropzone Demo是一个展示Dropzone库功能和用法的示例项目。 Dropzone Demo通常包含以下主要功能和用法展示: 1. 文件拖放:Dropzone Demo允许用户通过将文件拖到指定区域来上传文件。用户只需将文件拖入Dropzone指定区域即可实现文件上传,无需点击上传按钮。 2. 文件类型限制:Dropzone Demo提供了文件类型限制功能,允许用户限制可以上传的文件类型。例如,用户可以设置只能上传图片文件或者只允许上传特定扩展名的文件。 3. 文件预览:Dropzone Demo可以在文件上传前显示文件的预览。这对于用户确认选定的文件是否正确非常有帮助。预览通常是一个缩略图,用户可以通过点击预览图查看完整的文件。 4. 并发上传:Dropzone Demo支持并发上传多个文件。用户可以一次性选择并上传多个文件,而无需等待每个文件上传完成后才能选择和上传下一个。 5. 上传进度指示:Dropzone Demo提供了上传进度指示功能,允许用户实时了解文件上传的进度。通常会显示一个进度条,或者显示上传百分比等信息,让用户知道上传的进程。 总结而言,Dropzone Demo是一个展示Dropzone库功能和用法的示例项目,通过展示文件拖放、文件类型限制、文件预览、并发上传和上传进度指示等功能,帮助用户了解并使用Dropzone库实现文件上传功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值