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

最新推荐文章于 2023-03-13 14:49:16 发布

潇潇雨歇_

最新推荐文章于 2023-03-13 14:49:16 发布

阅读量7.6k

点赞数 1

文章标签：数据函数

本文链接：https://blog.csdn.net/linhaiyun_ytdx/article/details/76212182

版权

Bootstrap 前端框架学习笔记专栏收录该内容

8 篇文章 1 订阅

订阅专栏

代码：

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>

截图：