使用Dropzone.js上傳

時間  2019-11-06
標籤 使用 dropzone.js dropzone 上傳 欄目 JavaScript 简体版
原文   原文鏈接
原創【 我的網站歡迎訪問】
說明：後臺用的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') }}" 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') }}" 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') }}" 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') }}" 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">

  <!-- Optional theme -->
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
  <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') }}" 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或者其餘就看看沒必要下載

參考資料

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程