Bootstrap 實現檔案的本地拖拽上傳
阿新 • • 發佈：2018-12-23
程式碼：
uploadfile.html
<!DOCTYPE html> <html> <head> <title>檔案上傳</title> <meta charset="utf-8"/> <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css"> <script src="js/jquery-3.2.1.min.js"></script> <script src="js/bootstrap.min.js"></script> <style> /* layout.css Style */ .upload-drop-zone { height: 200px; border-width: 2px; margin-bottom: 20px; } /* skin.css Style*/ .upload-drop-zone { color: #ccc; border-style: dashed; border-color: #ccc; line-height: 200px; text-align: center } .upload-drop-zone.drop { color: #222; border-color: #222; } </style> </head> <body> <div class="container"> <div class="panel panel-primary"> <div class="panel-heading" style="text-align: center;"><strong>上傳檔案</strong></div> <div class="panel-body"> <!-- Standar Form --> <h4>請選擇檔案</h4> <form action="" method="post" enctype="multipart/form-data" id="js-upload-form"> <div class="form-inline"> <div class="form-group"> <input type="file" name="files[]" id="js-upload-files" multiple> </div> <button type="submit" class="btn btn-sm btn-primary" id="js-upload-submit">上傳</button> </div> </form> <!-- Drop Zone --> <h4>或者將檔案拖拽到這裡</h4> <div class="upload-drop-zone" id="drop-zone"> 檔案顯示 </div> <!-- Progress Bar --> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">已上傳 50% </span> </div> </div> <!-- Upload Finished --> <div class="js-upload-finished"> <h3>已上傳檔案</h3> <div class="list-group"> <a href="#" class="list-group-item list-group-item-success"><span class="badge alert-success pull-right">Success</span>image-01.jpg</a> <a href="#" class="list-group-item list-group-item-success"><span class="badge alert-success pull-right">Success</span>image-02.jpg</a> </div> </div> </div> </div> </div> <!-- /container --> <script> function($) { 'use strict'; // UPLOAD CLASS DEFINITION // ====================== var dropZone = document.getElementById('drop-zone'); var uploadForm = document.getElementById('js-upload-form'); var startUpload = function(files) { console.log(files) } uploadForm.addEventListener('submit', function(e) { var uploadFiles = document.getElementById('js-upload-files').files; e.preventDefault() startUpload(uploadFiles) }) dropZone.ondrop = function(e) { e.preventDefault(); this.className = 'upload-drop-zone'; startUpload(e.dataTransfer.files) } dropZone.ondragover = function() { this.className = 'upload-drop-zone drop'; return false; } dropZone.ondragleave = function() { this.className = 'upload-drop-zone'; return false; } }(jQuery); </script> </body> </html>
截圖：
