当前位置:首页 >> 网络编程

使用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="{{ 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="/UploadFiles/2021-04-02/{{ url_for('static', filename='jquery.js') }}">

效果

使用Dropzone.js上传的示例代码 

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="/UploadFiles/2021-04-02/{{ url_for('static', filename='jquery.js') }}">

效果

使用Dropzone.js上传的示例代码 

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="/UploadFiles/2021-04-02/{{ url_for('static', filename='jquery.js') }}">

效果

使用Dropzone.js上传的示例代码 

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="/UploadFiles/2021-04-02/{{ url_for('static', filename='jquery.js') }}">

说明:关于其他的配置请看最后的链接

主题

第一种

<!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="/UploadFiles/2021-04-02/{{ url_for('static', filename='jquery.js') }}">

第二种效果与默认的一样

<!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="/UploadFiles/2021-04-02/{{ url_for('static', filename='jquery.js') }}">

demo文件

如果是flask框架可进行测试点击此处下载,如果是php或者其他就看看不必下载

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。