使用Dropzone.js上传的示例代码
程序员文章站
2022-06-24 17:23:08
本文介绍了使用dropzone.js上传的示例代码,分享给大家,具体如下:
说明:后台用的python的flask框架,后台对你理解这篇文章没什么影响,你可以使用php...
本文介绍了使用dropzone.js上传的示例代码,分享给大家,具体如下:
说明:后台用的python的flask框架,后台对你理解这篇文章没什么影响,你可以使用php
form作为上传区
引入dropzone.js和dropzone.css然后使用表单form定义一个class=”dropzone”即可完成
<!doctype html> <html> <head> <meta charset="utf-8"> <title>flask upload with dropzone example</title> <link rel="stylesheet" href="{{ url_for('static', filename='dropzone.css') }}" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" type="text/css" /> <script src="{{ url_for('static', filename='jquery.js') }}"></script> <script src="{{ url_for('static', filename='dropzone.js') }}"></script> </head> <body> <!-- 第一种上传 --> <form id ="myawesomedropzone" action="{{ url_for('upload_file') }}" class="dropzone" method="post" enctype="multipart/form-data"></form> <!-- 第一种上传 --> </body> </html>
效果
div作为上传区
div作为上传区也很简单
<!doctype html> <html> <head> <meta charset="utf-8"> <title>flask upload with dropzone example</title> <link rel="stylesheet" href="{{ url_for('static', filename='dropzone.css') }}" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" type="text/css" /> <script src="{{ url_for('static', filename='jquery.js') }}"></script> <script src="{{ url_for('static', filename='dropzone.js') }}"></script> </head> <body> <div id="myid" class="dropzone" style="width: 800px; height: 300px;">点我上传</div> <script type="text/javascript"> //下面两行是js和jquery的方式实现绑定div的例子,你选择一种即可 //var mydropzone = new dropzone("#myid", { url: "{{ url_for('upload_file') }}" }); $("#myid").dropzone({ url: "{{ url_for('upload_file') }}" }); </script> </body> </html>
效果
form作为上传区配置
配置也分为两种,如果使用的form表单上传的就用如下方式配置
<!doctype html> <html> <head> <meta charset="utf-8"> <title>flask upload with dropzone example</title> <link rel="stylesheet" href="{{ url_for('static', filename='dropzone.css') }}" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" type="text/css" /> <script src="{{ url_for('static', filename='jquery.js') }}"></script> <script src="{{ url_for('static', filename='dropzone.js') }}"></script> </head> <body> <form id ="myawesomedropzone" action="{{ url_for('upload_file') }}" class="dropzone" method="post" enctype="multipart/form-data"> <div class="fallback"> <input name="file" type="file" multiple /> </div> </form> <script type="text/javascript"> //两种配置方式,第一种,表单上传时的配置方式,可以打开form表单的注释,myawesomedropzone是表单的id dropzone.options.myawesomedropzone = { paramname: "file", // the name that will be used to transfer the file maxfilesize: 2, // mb accept: function(file, done) { if (file.name != "justinbieber.jpg") { done("naha, you don't."); }else { done(); } } }; </script> </body> </html>
效果
div作为上传区配置
<!doctype html> <html> <head> <meta charset="utf-8"> <title>flask upload with dropzone example</title> <link rel="stylesheet" href="{{ url_for('static', filename='dropzone.css') }}" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" type="text/css" /> <script src="{{ url_for('static', filename='jquery.js') }}"></script> <script src="{{ url_for('static', filename='dropzone.js') }}"></script> </head> <body> <div id="myid" class="dropzone" style="width: 800px; height: 300px;">点我上传</div> <script type="text/javascript"> //第二种配置,这种使用的是div做上传区域时使用的配置 dropzone.autodiscover = false;//不知道该行有什么用,欢迎高手下方评论解答 $("#myid").dropzone({ url: "{{ url_for('upload_file') }}", addremovelinks: true, method: 'post', filesizebase: 1024 }); </script> </body> </html>
说明:关于其他的配置请看最后的链接
主题
第一种
<!doctype html> <html> <head> <meta charset=="utf-8"> <!-- latest compiled and minified css --> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="external nofollow" > <!-- optional theme --> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css" rel="external nofollow" > <script src="{{ url_for('static', filename='jquery.js') }}"></script> <script src="{{ url_for('static', filename='dropzone.js') }}"></script> <script> dropzone.autodiscover = false; </script> <style> html, body { height: 100%; } #actions { margin: 2em 0; } /* mimic table appearance */ div.table { display: table; } div.table .file-row { display: table-row; } div.table .file-row > div { display: table-cell; vertical-align: top; border-top: 1px solid #ddd; padding: 8px; } div.table .file-row:nth-child(odd) { background: #f9f9f9; } /* the total progress gets shown by event listeners */ #total-progress { opacity: 0; transition: opacity 0.3s linear; } /* hide the progress bar when finished */ #previews .file-row.dz-success .progress { opacity: 0; transition: opacity 0.3s linear; } /* hide the delete button initially */ #previews .file-row .delete { display: none; } /* hide the start and cancel buttons and show the delete button */ #previews .file-row.dz-success .start, #previews .file-row.dz-success .cancel { display: none; } #previews .file-row.dz-success .delete { display: block; } </style> </head> <body> <div class="container" id="container"> <h2 class="lead">configuration demo</h2> <div id="actions" class="row"> <div class="col-lg-7"> <!-- 控制总体的三个按钮 --> <span class="btn btn-success fileinput-button"> <i class="glyphicon glyphicon-plus"></i> <span>add files...</span> </span> <button type="submit" class="btn btn-primary start"> <i class="glyphicon glyphicon-upload"></i> <span>start upload</span> </button> <button type="reset" class="btn btn-warning cancel"> <i class="glyphicon glyphicon-ban-circle"></i> <span>cancel upload</span> </button> </div> <div class="col-lg-5"> <!-- 总体的进度 --> <span class="fileupload-process"> <div id="total-progress" class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"> <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div> </div> </span> </div> </div> <!-- data-dz-thumbnail:使用后代表该标签是存放缩略图的标签【这里必须是一个 <img /> 元素 ,并且alt 和 src 属性将被 dropzone改变】 data-dz-name:存放文件名 data-dz-errormessage:存放错误信息 data-dz-size:存放文件大小 data-dz-remove :删除队列中的文件,或者取消正在从队列上传到服务器的文件 data-dz-uploadprogress:上传进度【( 当这里有一个 uploadprogress事件时, dropzone 将更改 style.width 属性从 0% 到 100% )】 --> <div class="table table-striped files" id="previews"> <div id="template" class="file-row"> <div> <span class="preview"><img data-dz-thumbnail /></span> </div> <div> <p class="name" data-dz-name ></p> <strong class="error text-danger" data-dz-errormessage></strong> </div> <div> <p class="size" data-dz-size></p> <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"> <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div> </div> </div> <div> <button class="btn btn-primary start"> <i class="glyphicon glyphicon-upload"></i> <span>start</span> </button> <button data-dz-remove class="btn btn-warning cancel"> <i class="glyphicon glyphicon-ban-circle"></i> <span>cancel</span> </button> <button data-dz-remove class="btn btn-danger delete"> <i class="glyphicon glyphicon-trash"></i> <span>delete</span> </button> </div> </div> </div> <script> // get the template html and remove it from the doument var previewnode = document.queryselector("#template"); previewnode.id = ""; var previewtemplate = previewnode.parentnode.innerhtml; //开始先删除单个文件的布局 previewnode.parentnode.removechild(previewnode); var mydropzone = new dropzone(document.body, { // 指定拖拽区为body url: "{{ url_for('upload_file') }}", // set the url thumbnailwidth: 80, thumbnailheight: 80, paralleluploads: 20, previewtemplate: previewtemplate, autoqueue: false, // 当队列有文件,是否立刻自动上传到服务器 previewscontainer: "#previews", // 指定存放文件队列区 clickable: ".fileinput-button" // 点击某个按钮或区域后出现选择电脑中本地图片,默认是previewscontainer指定的区域 }); mydropzone.on("addedfile", function(file) { // 让模版中的单个文件可以点击上传 file.previewelement.queryselector(".start").onclick = function() { mydropzone.enqueuefile(file); }; }); // 显示所有文件整体上传进度1-100 mydropzone.on("totaluploadprogress", function(progress) { document.queryselector("#total-progress .progress-bar").style.width = progress + "%"; }); mydropzone.on("sending", function(file) { // 显示整体的上传的进度条,说明:原来是0,所以上面的style.width = progress + "%"即使是100%也看不到 document.queryselector("#total-progress").style.opacity = "1"; // 失效上传按钮 file.previewelement.queryselector(".start").setattribute("disabled", "disabled"); }); // 当没有文件上传时,隐藏进度条 mydropzone.on("queuecomplete", function(progress) { document.queryselector("#total-progress").style.opacity = "0"; }); // 上传所有 document.queryselector("#actions .start").onclick = function() { mydropzone.enqueuefiles(mydropzone.getacceptedfiles()); //mydropzone.enqueuefiles(mydropzone.getfileswithstatus(dropzone.added));与上面一样,可查看源码对比 }; //取消所有 document.queryselector("#actions .cancel").onclick = function() { mydropzone.removeallfiles(true); }; </script> </body> </html>
第二种效果与默认的一样
<!doctype html> <html> <head> <meta charset="utf-8"> <title>flask upload with dropzone example</title> <link rel="stylesheet" href="{{ url_for('static', filename='dropzone.css') }}" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" type="text/css" /> <script src="{{ url_for('static', filename='jquery.js') }}"></script> <script src="{{ url_for('static', filename='dropzone.js') }}"></script> </head> <body> <div id="myid" class="dropzone" style="width: 500px; height: 300px;"></div> <div id="aaa"></div> <div id="preview-template" style="display: none;"> <div class="dz-preview dz-file-preview "> <div class="dz-image"><img data-dz-thumbnail /></div> <div class="dz-details"> <div class="dz-filename"><span data-dz-name></span></div> <div class="dz-size" data-dz-size></div> </div> <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div> <div class="dz-success-mark"><span>✔</span></div> <div class="dz-error-mark"><span>✘</span></div> <div class="dz-error-message"><span data-dz-errormessage></span></div> </div> </div> <script type="text/javascript"> dropzone.autodiscover = false;//解决两次实例dropzone错误,可在控制台看到该错误 $("#myid").dropzone({ url: "{{ url_for('upload_file') }}", addremovelinks: true, method: 'post', filesizebase: 1024, previewtemplate: $('#preview-template').html(),//如果去掉该选项就会使用默认的 autoqueue: true, init: function() { this.on("addedfile", function(file) { $(".start").click (function() { this.enqueuefile(file); }) }); } }); </script> </body> </html>
demo文件
如果是flask框架可进行测试点击此处下载,如果是php或者其他就看看不必下载
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
推荐阅读
-
javascript中Date类的详解(代码示例)
-
比较全的PHP 会话(session 时间设定)使用入门代码
-
open 动态修改img的onclick事件示例代码_javascript技巧
-
jquery ajax 同步异步的执行示例代码_jquery
-
【前端开发环境】前端使用GIT管理代码仓库需要掌握的几个必备技巧和知识点总结
-
django使用LDAP验证的方法示例
-
PHP下使用CURL方式POST数据至API接口的代码_PHP
-
Node.js Koa2使用JWT进行鉴权的方法示例
-
Javascript循环绑定事件的示例代码_javascript技巧
-
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包_jquery