Bootstrap 实现文件的本地拖拽上传

落日映苍穹つ 2022-06-11 01:58 320阅读 0赞

代码：

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">
    
              
              <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>
    
              
              <h4>或者将文件拖拽到这里</h4>
              <div class="upload-drop-zone" id="drop-zone">
                文件显示
              </div>
    
              
              <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>
    
              
              <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> 
        <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>

截图：

![Center][]

![Center 1][]

[Center]: /images/20220611/0b4a482d41a84374a7e1a7dd61e9277e.png
[Center 1]: /images/20220611/b833ad841c784ed0ad320811bdacf37c.png