使用使用Dropzone.js上传的示例代码上传的示例代码
本文介绍了使用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="{{%20url_for('static',%20filename='dropzone.css')%20}}" rel="external nofollow" rel="external nofollow" rel="external nofollow"
rel="external nofollow" rel="external nofollow" type="text/css" />
<script src="{{%20url_for('static',%20filename='jquery.js')%20}}"></script>
<script src="{{%20url_for('static',%20filename='dropzone.js')%20}}"></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="{{%20url_for('static',%20filename='dropzone.css')%20}}" rel="external nofollow" rel="external nofollow" rel="external nofollow"
rel="external nofollow" rel="external nofollow" type="text/css" />
<script src="{{%20url_for('static',%20filename='jquery.js')%20}}"></script>
<script src="{{%20url_for('static',%20filename='dropzone.js')%20}}"></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>
效果
下载后可阅读完整内容，剩余5页未读，立即下载
weixin_38569651
- 粉丝: 4
- 资源: 908
我的内容管理
展开
最新资源
- WebLogic集群配置与管理实战指南
- AIX5.3上安装Weblogic 9.2详细步骤
- 面向对象编程模拟试题详解与解析
- Flex+FMS2.0中文教程：开发流媒体应用的实践指南
- PID调节深入解析：从入门到精通
- 数字水印技术：保护版权的新防线
- 8位数码管显示24小时制数字电子钟程序设计
- Mhdd免费版详细使用教程：硬盘检测与坏道屏蔽
- 操作系统期末复习指南：进程、线程与系统调用详解
- Cognos8性能优化指南：软件参数与报表设计调优
- Cognos8开发入门：从Transformer到ReportStudio
- Cisco 6509交换机配置全面指南
- C#入门：XML基础教程与实例解析
- Matlab振动分析详解：从单自由度到6自由度模型
- Eclipse JDT中的ASTParser详解与核心类介绍
- Java程序员必备资源网站大全
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
