Question

我再次需要你的帮助

我可以拖放文件或点击HTML5上的基本输入文件，它就可以了。我想要的是能够使用标签制作，我可以点击标签添加带有标签的文件，但我不能将文件拖放到标签上。我已经尝试用这个JavaScript来实现它，但它不起作用，我已经阅读了一些教程，我不确定下面的代码。

$(document).on('dragenter', '#image-event-label', function() {
        $(this).css('border', '1px solid #B8A1F5');
        return false;
    });
     
    $(document).on('dragover', '#image-event-label', function(e){
        e.preventDefault();
        e.stopPropagation();
        $(this).css('border', '1px solid #B8A1F5');
        return false;
    });
     
    $(document).on('dragleave', '#image-event-label', function(e) {
        e.preventDefault();
        e.stopPropagation();
        $(this).css('border', '1px solid #422B7E');
        return false;
    });

    $(document).on('drop', '#image-event-label', function(e) {
        if(e.originalEvent.dataTransfer){
           if(e.originalEvent.dataTransfer.files.length) {
               e.preventDefault();
               e.stopPropagation();
               $(this).css('border', '1px solid #0F0');
               upload(e.originalEvent.dataTransfer.files);
           }  
        }
        else {
           $(this).css('border', '1px solid #422B7E');
        }
        return false;
    });

    function upload(files) {
        var f = files[0] ;
        var reader = new FileReader();
        reader.onload = function (event) {
            $('#image-event').val(event.target.result);
        }
        reader.readAsDataURL(f);      
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="image-event" id="image-event-label">Import an image</label>
				<input type="file" name="image-event" style="display:none" id="image-event">

提前感谢大家！

Answer 1

最简单的方法是将input[type=file]直接附加到<label>，并以涵盖所有标签的方式设置此输入的样式。

这样，您就可以直接在标签上删除文件，输入的默认行为将处理它，最终，此部分不需要js：

// only to show it did change
$('#image-event').on('change', function upload(evt) {
  console.log(this.files[0]);
});

// only to show where is the drop-zone:
$('#image-event-label').on('dragenter', function() {
  this.classList.add('dragged-over');
})
 .on('dragend drop dragexit', function() {
  this.classList.remove('dragged-over');
});

#image-event {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  display: block;
}
#image-event-label {
  position: relative;
}

#image-event-label.dragged-over {
  border: 1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="image-event" id="image-event-label">
    	Import an image
    	<input type="file" name="image-event" id="image-event">
</label>

现在，请注意，实际上现在可以设置.files的{{1}} FileList，但是您需要将其设置为另一个FileList对象，幸运的是，有一个可用的DropEvent附带的DataTransfer对象：

input[type=file]

function handleDroppedFile(evt) {
  evt.preventDefault();
  // since we use jQuery we need to grab the originalEvent
  var dT = evt.originalEvent.dataTransfer;
  var files = dT.files;
  if (files && files.length) {
    // we set our input's 'files' property
    $('#image-event')[0].files = files;
  }
}
$('#image-event-label').on({
    'drop': handleDroppedFile,
    'dragenter': function(e) { e.preventDefault(); },
    'dragover': function(e) {
      e.preventDefault();
      this.classList.add('dragged-over');
    }
  })
  .on('dragleave dragexit', function() {
    this.classList.remove('dragged-over')
  });

.dragged-over {
  border: 1px solid;
}

* IIRC，现在支持Chrome，Safari，后期Edge和后期Firefox。我不认为IE确实支持它，所以在使用它时要小心。

Answer 2

由于安全原因，您无法更改文件输入的值。设置文件输入值的唯一方法是用户从文件选择窗口中选择一个文件。

因此，您应该将文件存储在一个数组中并使用它上传文件。没有测试以下演示：

$(document).on('dragenter', '#image-event-label', function() {
  $(this).css('border', '1px solid #B8A1F5');
  return false;
});

$(document).on('dragover', '#image-event-label', function(e) {
  e.preventDefault();
  e.stopPropagation();
  $(this).css('border', '1px solid #B8A1F5');
  return false;
});

$(document).on('dragleave', '#image-event-label', function(e) {
  e.preventDefault();
  e.stopPropagation();
  $(this).css('border', '1px solid #422B7E');
  return false;
});

$(document).on('drop', '#image-event-label', function(e) {
  if (e.originalEvent.dataTransfer) {
    if (e.originalEvent.dataTransfer.files.length) {
      e.preventDefault();
      e.stopPropagation();
      $(this).css('border', '1px solid #0F0');
      saveFile(e.originalEvent.dataTransfer.files);
    }
  } else {
    $(this).css('border', '1px solid #422B7E');
  }
  return false;
});
var Files = []

function saveFile(files) {
  var file = files[0];
  Files.push(file)
}

function upload() {
  var data = new FormData()
  $.each(Files, function(i, file){
    data.append('file', file)
  })
  $.ajax({
    url: "url",
    data: data,
    processData: false,
    contentType: false,
    success: function(result){
      // ... your codes ...
    }
  })
}

#image-event-label {
  display: block;
  width: 300px;
  line-height: 300px;
  text-align: center;
  outline: 1px black dashed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="image-event" id="image-event-label">Import an image</label>
<input type="file" name="image-event" style="display:none" id="image-event">

将文件拖放到标签上

2 个答案: