溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

使用Dropzone.js上傳的示例代碼

發(fā)布時間：2020-08-22 16:00:06 來源：腳本之家 閱讀：297 作者：年輕時代 欄目：web開發(fā)

本文介紹了使用Dropzone.js上傳的示例代碼，分享給大家，具體如下：

說明：后臺用的python的flask框架，后臺對你理解這篇文章沒什么影響，你可以使用php

form作為上傳區(qū)

引入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>

效果

使用Dropzone.js上傳的示例代碼 

div作為上傳區(qū)

div作為上傳區(qū)也很簡單

<!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" >點我上傳</div>
<script type="text/javascript">
    //下面兩行是js和jquery的方式實現(xiàn)綁定div的例子，你選擇一種即可
    //var myDropzone = new Dropzone("#myId", { url: "{{ url_for('upload_file') }}" });
    $("#myId").dropzone({ url: "{{ url_for('upload_file') }}" });
   </script>
   
</body>
</html>

效果

使用Dropzone.js上傳的示例代碼 

form作為上傳區(qū)配置

配置也分為兩種，如果使用的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>

效果

使用Dropzone.js上傳的示例代碼 

div作為上傳區(qū)配置

<!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" >點我上傳</div>
<script type="text/javascript">
    //第二種配置，這種使用的是div做上傳區(qū)域時使用的配置
    Dropzone.autoDiscover = false;//不知道該行有什么用，歡迎高手下方評論解答
    $("#myId").dropzone({ 
    url: "{{ url_for('upload_file') }}",
    addRemoveLinks: true,    
    method: 'post',
    filesizeBase: 1024    
    });
</script>
   
</body>
</html>

說明：關(guān)于其他的配置請看最后的鏈接

主題

第一種

<!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"  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">
  <h3 class="lead">Configuration Demo</h3>
  <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">
    <!-- 總體的進(jìn)度 -->
    <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"  data-dz-uploadprogress></div>
     </div>
    </span>
   </div>
  </div>
  <!--
  data-dz-thumbnail：使用后代表該標(biāo)簽是存放縮略圖的標(biāo)簽【這里必須是一個 <img /> 元素 ，并且alt 和 src 屬性將被 Dropzone改變】
  data-dz-name：存放文件名
  data-dz-errormessage：存放錯誤信息
  data-dz-size：存放文件大小
  data-dz-remove ：刪除隊列中的文件，或者取消正在從隊列上傳到服務(wù)器的文件
  data-dz-uploadprogress：上傳進(jìn)度【( 當(dāng)這里有一個 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"  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, { // 指定拖拽區(qū)為body
    url: "{{ url_for('upload_file') }}", // Set the url
    thumbnailWidth: 80,
    thumbnailHeight: 80,
    parallelUploads: 20,
    previewTemplate: previewTemplate,
    autoQueue: false, // 當(dāng)隊列有文件，是否立刻自動上傳到服務(wù)器
    previewsContainer: "#previews", // 指定存放文件隊列區(qū)
    clickable: ".fileinput-button" // 點擊某個按鈕或區(qū)域后出現(xiàn)選擇電腦中本地圖片，默認(rèn)是previewsContainer指定的區(qū)域
   });
   myDropzone.on("addedfile", function(file) {
    // 讓模版中的單個文件可以點擊上傳
    file.previewElement.querySelector(".start").onclick = function() { myDropzone.enqueueFile(file); };
   });
   // 顯示所有文件整體上傳進(jìn)度1-100
   myDropzone.on("totaluploadprogress", function(progress) {
    document.querySelector("#total-progress .progress-bar").style.width = progress + "%";
   });
   
   myDropzone.on("sending", function(file) {
    // 顯示整體的上傳的進(jìn)度條，說明：原來是0，所以上面的style.width = progress + "%"即使是100%也看不到
    document.querySelector("#total-progress").style.opacity = "1";
    // 失效上傳按鈕
    file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
   });
   // 當(dāng)沒有文件上傳時，隱藏進(jìn)度條
   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>

第二種效果與默認(rèn)的一樣

<!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" ></div>
<div id="aaa"></div>
<div id="preview-template" >
  <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(),//如果去掉該選項就會使用默認(rèn)的
    autoQueue: true,
    init: function() {
        this.on("addedfile", function(file) {
          $(".start").click (function() { 
          this.enqueueFile(file);    
          })    
        });
      }
    }); 
  
   </script>
   
</body>
</html>

demo文件

如果是flask框架可進(jìn)行測試點擊此處下載，如果是php或者其他就看看不必下載

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手