将图像从桌面拖放到浏览器，而不是通过输入进行搜索 [英] Drag and drop image(s) from desktop to browser instead of searching via input

问题描述

我有一个非常基本的输入表格，它允许我从本地文件夹中选择多个图像并将它们显示在页面上以及显示文件类型/名称/大小等信息。

我希望能够将图像拖放到页面中，而不是每次都手动搜索图像。这是我卡住的地方。我不知道我需要什么谷歌才能得到我想要的结果。我在文件API 中看到了很多我真正不了解的东西。

这是我到目前为止： https://jsfiddle.net/umx1vpwy/

任何帮助都将得到大量赞赏！

代码：

  function readImage（file）{var reader = new FileReader（）; var image = new Image（）; reader.readAsDataURL（文件）; reader.onload = function（_file）{image.src = _file.target.result; // url.createObjectURL（file）; image.onload = function（）{var w = this.width，h = this.height，t = file.type，// ext only：// file.type.split（'/'）[1]，n = file.name，s = ~~（file.size / 1024）+'KB'; $（'＃uploadPreview'）。append（'< img src =''+ this.src +'>'+ w +'x'+ h +''+ s +''+ t +''+ n +'< br>'）; }; image.onerror = function（）{alert（'无效的文件类型：'+ file.type）; }; };如果（F&& F [0]）变量（函数（e）{if（this.disabled）返回警报（'文件上传不支持！'）; var F = this.files; 0]; for（var i = 0; i< F.length; i ++）readImage（F [i]）;}）;  

 < input type =fileid =choosemultiple =multiple ; / div>  

我只想说浏览器兼容性不应该成为问题，因为这只会在Chrome或Firefox中用作工具。 解决方案

这应该有所帮助：

  var el = document.querySelector（YOUR SELECTOR）; 
 
函数onDragEnter（e）{
 e.stopPropagation（）; 
 e.preventDefault（）; 
} 
 
函数onDragOver（e）{
 e.stopPropagation（）; 
 e.preventDefault（）; 
} 
 
函数onDragLeave（e）{
 e.stopPropagation（）; 
 e.preventDefault（）; 
} 
 
函数onDrop（e）{
 e.stopPropagation（）; 
 e.preventDefault（）; 
 setFiles（e.dataTransfer.files）; 
返回false; 
} 
 
 el.addEventListener（'dragenter'，onDragEnter，false）; 
 el.addEventListener（'dragover'，onDragOver，false）; 
 el.addEventListener（'dragleave'，onDragLeave，false）; 
 el.addEventListener（'drop'，onDrop，false）; 
 
函数setFiles（files）{
 //这里有你的文件
} 
  

I'll be honest, way out of my depth here so any help or guidance would be great.

I have a very basic input form that allows me to choose multiple images from local folders and display them on the page as well as display info such as file type/name/size.

I'd like to be able to drag and drop images into the page, rather than manually search for the images each time. This is where I'm stuck. I have no idea what I need to google to get my desired result. I've seen a lot around the file API that I genuinely don't really understand.

Here's what I have so far: https://jsfiddle.net/umx1vpwy/

Any help would be massively appreciated!

Code:

function readImage(file) {

     var reader = new FileReader();
     var image = new Image();

     reader.readAsDataURL(file);
     reader.onload = function(_file) {
       image.src = _file.target.result; // url.createObjectURL(file);
       image.onload = function() {
         var w = this.width,
           h = this.height,
           t = file.type, // ext only: // file.type.split('/')[1],
           n = file.name,
           s = ~~(file.size / 1024) + 'KB';
         $('#uploadPreview').append('<img src="' + this.src + '"> ' + w + 'x' + h + ' ' + s + ' ' + t + ' ' + n + '<br>');
       };
       image.onerror = function() {
         alert('Invalid file type: ' + file.type);
       };
     };

   }
   $("#choose").change(function(e) {
     if (this.disabled) return alert('File upload not supported!');
     var F = this.files;
     if (F && F[0])
       for (var i = 0; i < F.length; i++) readImage(F[i]);
   });

<input type="file" id="choose" multiple="multiple" />
<div id="uploadPreview"></div>

I'd just like to say that browser compatibility shouldn't be an issue as this will just be used as a tool in Chrome or Firefox.

解决方案

This should help:

var el = document.querySelector(YOUR SELECTOR);

function onDragEnter(e) {
    e.stopPropagation();
    e.preventDefault();
}

function onDragOver(e) {
    e.stopPropagation();
    e.preventDefault();
}

function onDragLeave(e) {
    e.stopPropagation();
    e.preventDefault();
}

function onDrop(e) {
    e.stopPropagation();
    e.preventDefault();
    setFiles(e.dataTransfer.files);
    return false;
}

el.addEventListener('dragenter', onDragEnter, false);
el.addEventListener('dragover', onDragOver, false);
el.addEventListener('dragleave', onDragLeave, false);
el.addEventListener('drop', onDrop, false);

function setFiles(files){
    //Here you have your files
}

这篇关于将图像从桌面拖放到浏览器，而不是通过输入进行搜索的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！