javascript 基本的jquery拖放文件

Posted 2021-05-03

.drop-file {
  width: 400px;
  margin: 0 auto;
}
.drop-file input {
  display: none;
}
.drop-file .previews {
  column-count: 3;
  column-gap: 5px;
  display: inline-block;
  width: 100%;
  margin-top: 10px;
}
.drop-file .preview-block {
  border: 1px solid #bbb;
  padding: 3px;
  margin-bottom: 5px;
  position: relative;
  overflow: hidden;
  background: #f1f1f1;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  break-inside: avoid-column;
}
.drop-file .preview-block .deleter {
  background: red;
  color: white;
  text-align: center;
  top: 0;
  right: 0;
  height: 15px;
  width: 15px;
  line-height: 13px;
  font-size: 15px;
  padding: 3px;
  position: absolute;
  text-transform: lowercase;
  font-family: monospace;
  cursor: pointer;
}
.drop-file .preview-block img {
  width: 100%;
}
#drop_zone {
  position: relative;
  padding: 25px;
  text-align: center;
  color: #bbb;
  border: 1px solid #bbb; 
  z-index: 9;
}
#drop_zone:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  width: calc(100% - 15px);
  height: calc(100% - 15px);
  border: 2px dashed #bbb;
  z-index: -1;
  border-radius: 4px;
}
#drop_zone.drag-over:before {
  border-color: green;
}
#drop_zone .text {
  padding-bottom: 5px;
}
#drop_zone .label {
  padding-top: 5px;
  display: inline-block;;
  width: 100%;
}
#drop_zone label {
  color: #009fff;
  font-weight: 600;
  z-index: 99;
  margin: 0;
  background: white;
  padding: 5px 10px;
  height: auto;
  border: 1px solid #ccc;
  cursor: pointer;
  display: inline-block;
}
#drop_zone label.drag-over {
  background: #e9f8ff;
}

<div class="drop-file">
  <div id="drop_zone">
    <div clasS="text">Trascina file qui oppure</div>
    <div class="label">
      <label class="img-input" for="img-input">Cerca file</label>
    </div>
  </div>
  <input class="img-input hidden" type="file" id="img-input" accept="image/*,audio/*,video/*,.doc,.docx,.xls,.rtf,.pdf,.txt" multiple>
  <div class="previews"></div>
</div>

var fileUploadField = function() {
      var $this = this;

      this.previews = [];

      this.handlers = function() {
        $('#drop_zone').on('dragover dragenter', function (e) {
          e.preventDefault();
          e.stopPropagation();
          $(this).addClass('drag-over');
        });
        $('#drop_zone').on('dragleave drop', function (e) {
          e.preventDefault();
          e.stopPropagation();
          $(this).removeClass('drag-over');
        });
        $('#drop_zone').on('drop', function (e) {
          var dt = e.originalEvent.dataTransfer;
          $this.readImage(dt);
        });
        $('.drop-file input[type="file"]').on('change', function (e) {
          var dt = e.target;
          $this.readImage(dt);
        });
        $(document).on('click','.drop-file .deleter', function(e) {
          var id = $(this).data('id');
          $this.previews = $this.previews.filter(function(preview) {
              return preview.size !== id;
          });;
          $(this).parent().remove();
        })
      }

      this.readImage = function(transferData) {
        var files = transferData.files;
  
        Array.prototype.forEach.call(files, function(file){
          var reader = new FileReader();
          reader.onload = function (e) {
            file["base64"] = reader.result;
            $this.previews.push(file);
            $('.drop-file .previews').html($('.drop-file .previews').html()+'<div class="preview-block"><div class="deleter" data-id="'+file.size+'">X</div><img src="'+reader.result+'"></div>');
          };
          reader.readAsDataURL(file);
        });

      }

      this.init = function() {
        $this.handlers();
      }

      this.init();
    };
    
    var testFileUploadField = new fileUploadField();