javascript - 预览图像上传 - 输入 URL 时禁用拖放

Question

我有一个用于上传图像的表单，它在上传之前显示图像的预览。
您可以选择或拖放文件或粘贴 URL。
选择一个文件后，可以拖放另一个文件。但是，当选择 URL 并删除文件时，会出现困惑，因为出现太多按钮，因为文件和 URL 会在需要时出现单独的按钮。
有没有办法在 URL 已粘贴时禁止删除图像？我已经尝试了找到的各种代码，但无法使其工作。

今天可以粘贴的Google Logo :https://www.google.co.uk/logos/doodles/2018/doodle-snow-games-day-1-4597519198715904.3-s.png

$(document).bind('drop dragover', function (e) {
      e.preventDefault();
    });

    // Adding filename under preview //////////////////////////
    jQuery(function($) {
    $('input[type="file"]').change(function() {
      if ($(this).val()) {
        error = false;

        var filename = $(this).val();
        filename = filename.replace(/.*[\/\\]/, '');

        $(this).closest('.file-upload').find('.file_name').html(filename);

        if (error) {
          parent.addClass('error').prepend.after(
          '<div class="alert alert-error">' + error + '</div>');
    }}});
    });////////////////////////////////////////////////////////

    var imageLoader = document.getElementById('myfile');
      imageLoader.addEventListener('change', handleImage, false);

    // Select or drag and drop //
    function handleImage(e) {
      var reader = new FileReader();
      reader.onload = function (event) {
          $('#uploader').removeAttr('onclick').addClass('disabled_');
          $('#bg_img').addClass('disabled_').attr('src', event.target.result);
          $('#click_or').hide();
          $('#url').hide();
          $('.file_name').show();

          $('#cancel_file').show();
          $('#upload_file').show();
          $('#crop_file').show();
      }
      reader.readAsDataURL(e.target.files[0]);}

      $('#cancel_file').click(function(e){
          $('#myfile').val("");
          $('#uploader').attr('onclick', "$('#myfile').click()")
            .removeClass('disabled_');
          $('#bg_img').removeClass('disabled_')
            .attr('src', "https://i.imgur.com/j0KblIu.png");
          $('#click_or').show();
          $('#url').show();
          $('.file_name').hide();

          $('#cancel_file').hide();
          $('#upload_file').hide();
          $('#crop_file').hide();
      });

      // Paste URL //
      $("#url").bind('paste keyup', function(event) {
        var _this = this;
        setTimeout( function() {
          var text = $(_this).val();

          $('#cancel_url').show();
          $('#upload_url').show();
          $('#crop_url').show();
          $('#bg_img').attr('src', text);
          $('#uploader').removeAttr('onclick').addClass('disabled_');
          $('#bg_img').addClass('disabled_');
          $('#url').hide();
          $('#click_or').hide();

          url_filename = text.split('/').pop()

          $('.file_name').html(url_filename).show();
      }, 0);});

      $('#cancel_url').click(function(e){
          $('#url').val("");
          $('#bg_img').attr('src', "https://i.imgur.com/j0KblIu.png");
          $('#uploader').attr('onclick', "$('#myfile').click()");
          $('#uploader').removeClass('disabled_');
          $('#bg_img').removeClass('disabled_');
          $('#url').show();
          $('#cancel_url').hide();
          $('#upload_url').hide();
          $('#crop_url').hide();
          $('.file_name').hide();
          $('#click_or').show();
      });


    var dropbox;
    dropbox = document.getElementById("uploader");
    dropbox.addEventListener("dragenter", dragenter, false);
    dropbox.addEventListener("dragover", dragover, false);
    dropbox.addEventListener("drop", drop, false);

    function dragenter(e) {
    e.stopPropagation();
    e.preventDefault();
    }
    function dragover(e) {
    e.stopPropagation();
    e.preventDefault();
    }
    function drop(e) {
    e.stopPropagation();
    e.preventDefault();
    //you can check e's properties
    //console.log(e);
    var dt = e.dataTransfer;
    var files = dt.files;

    //this code line fires your 'handleImage' function (imageLoader change event)
    imageLoader.files = files;
    }

    function validate(evt) {
   var theEvent = evt || window.event;
   var key = theEvent.charCode || theEvent.which;

   if(key >= 32 && (theEvent.ctrlKey === undefined || !theEvent.ctrlKey)) {
    if(theEvent.preventDefault) theEvent.preventDefault();
    else theEvent.returnValue = false;
  }}

#uploader {
  position: relative;
  width: 250px; 
  height: 250px;
  line-height: 250px;
  background: transparent; 
  border: 2px dashed #e8e8e8;
  cursor: pointer;
  color: #777;
  font-family: 'Arial';
  font-weight: bold;
  text-align: center;
  text-shadow: 0 0 10px white;
  -webkit-transition: text-shadow 0.1s linear;
    -moz-transition: text-shadow 0.1s linear;
    -ms-transition: text-shadow 0.1s linear;
    -o-transition: text-shadow 0.1s linear;
    transition: text-shadow 0.1s linear;
  overflow-x: hidden; 
  overflow-y: hidden; 
  opacity: 1;
}
#uploader:hover {
  color: #999;}
#myfile {display: none;}
#click_or {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
#bg_img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: -1;
    background-color: #eee;
}
#uploader.disabled_ {
  cursor: default;
}
img.disabled_ {
  object-fit:contain;
  image-rendering: pixelated;
}
#cancel_file, #cancel_url 
  {display: none;}

.file_name {
  font-family: 'Arial';
  font-weight: bold;
  font-size: 13px;
  color:#555;
}

button[type='submit'] {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="file-upload">

    <div id="uploader" onclick="$('#myfile').click()" class="noDrop">
        <span id='click_or'>Click or drag and drop<br>to select an image</span>
        <img id="bg_img" src="https://i.imgur.com/j0KblIu.png">
    </div>

    <input type="file" name="myfile" id="myfile" accept="image/*" class="noDrop">
    <input type="text" name="url" id="url" placeholder=" ... or paste URL to image"
      onkeypress='validate(event)' autocomplete="off">
    <span class="file_name"></span>

    <button type="button" id="cancel_file">Cancel</button>
    <button type="button" id="cancel_url">Cancel</button>

    <button type="submit" name='upload_file' id="upload_file">Upload</button>
    <button type="submit" name='crop_file' id="crop_file">Crop</button>

    <button type="submit" name='upload_url' id="upload_url">Upload</button>
    <button type="submit" name='crop_url' id="crop_url">Crop</button>

    <span class="url_name"></span>

    </div>

Answer 1

如果粘贴 URL，则停止监听添加的文件:

 imageLoader.removeEventListener('change', handleImage, false);

这应该添加到'paste keyup'回调中。