编程 Javascript

jQuery图片拖动组件Dropzone用法示例

Posted in Javascript onJanuary 17, 2017

本文实例讲述了jQuery图片拖动组件Dropzone用法。分享给大家供大家参考，具体如下：

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>

希望本文所述对大家jQuery程序设计有所帮助。

jQuery图片拖动组件Dropzone用法示例

- Author -

ISaiSai

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

经典海量jQuery插件大家可以收藏一下

Feb 07 Javascript

jQuery遍历Form示例代码

Sep 03 Javascript

js获取系统的根路径实现介绍

Sep 08 Javascript

jquery模拟SELECT下拉框取值效果

Oct 23 Javascript

javascript实现超炫的向上滑行菜单实例

Aug 03 Javascript

基于canvas实现的钟摆效果完整实例

Jan 26 Javascript

AngularJS表单和输入验证实例

Nov 02 Javascript

浅谈javascript的url参数parse和build函数

Mar 04 Javascript

vue响应式系统之observe、watcher、dep的源码解析

Apr 09 Javascript

layui switch 开关监听弹出确定状态转换的例子

Sep 21 Javascript

详解Vue template 如何支持多个根结点

Feb 10 Javascript

详解Vue Cli浏览器兼容性实践

Jun 08 Javascript

js生成随机数方法和实例

Jan 17 #Javascript

jQuery表单插件ajaxForm实例详解

Jan 17 #Javascript

js实现手机拍照上传功能

Jan 17 #Javascript

angular实现form验证实例代码

Jan 17 #Javascript

基于jQuery实现数字滚动效果

Jan 16 #Javascript

5种JavaScript脚本加载的方式

Jan 16 #Javascript

WebPack基础知识详解

Jan 16 #Javascript