javascript - DataTransfer 来自同一页面的图像提供 URL，但来自不同页面的图像提供文件

Question

编辑
此问题的根源在于 Sami 所确定的 Edge 浏览器的行为。 Firefox 做同样的事情，但 Chrome 工作正常。
原始问题
我有一个放置容器供用户拖放图像以设置 <input type="file">与图像。
如果从不同的页面拖放图像，则该图像被识别为文件。但是，如果图像是从与放置容器相同的页面拖放的，则将其识别为 URL。
为什么从与放置容器相同的页面拖放图像时，图像不被识别为文件？
这是放置容器和图像文件的 fiddle 。当您将此页面上的图像文件拖到放置容器中时，它会被识别为 URL，尽管我希望它被识别为文件。
https://jsfiddle.net/nadf9c82/1/
接下来，尝试拖动这个 fiddle 上的图像https://jsfiddle.net/7sqb5r0f/1/进入另一个 fiddle 的放置容器，你会看到它被识别为一个文件，这就是我想要的。
为什么与放置容器在同一页面上的图像评估为 URL 而不是文件？有没有办法让它们被识别为文件而不是 URL？
这是供引用的代码

<div class="dropContainer" id="dropContainer">Drop Here</div>

<div id="imagetwo">
   <img src="http://a.mktgcdn.com/p/khxNbcdQcr1HQKNgk9cPNUyWUprmZ5Dryx9P5MAV0SE/2669x3840.jpg" />
</div>
<script>
dropContainer.ondrop = function(evt) {
  //evt.preventDefault();
  if(evt.dataTransfer.files[0]){
    console.log("is a file");
    const dT = new DataTransfer();
    dT.items.add(evt.dataTransfer.files[0]);
    fileInput.files = dT.files;
  }else{
    // Try dataTransfer url second
    var dataTransferUrl = evt.dataTransfer.getData('url');
    if(dataTransferUrl){
      console.log('is a url, not a file');
      console.log(dataTransferUrl);
    }
  }
};
</script>

Answer 1

我认为你可以做到，但它在 Fiddle 中不起作用由于 The page at 'https://jsfiddle.net/' was loaded over HTTPS, but requested an insecure resource ... the content must be served over HTTPS由于您的HTTP要求
这就是我的想法，每当您删除图像时，它都会收到一个 URL 而不是您想要的文件。然后把它做成一个文件。
这叫做转换你的URL image to File object ，如果我的方法不起作用，这是您多看的关键字，希望它能给您一些解决方法，因为我也不擅长这个。
将此代码替换为您的Try dataTransfer URL second部分，但请注意它会在 Fiddle 上引发错误由于 HTTP要求。所以我必须更换 HTTP与 HTTPS ，但它会给你CORS Block , 所以如果你有 unblock CORS 的扩展名，它当然可以用于开发或测试目的。

    let url = evt.dataTransfer.getData('url');

    const urlArray = Array.from(url)
    urlArray.splice(4, 0, 's')
    const urlFinal = urlArray.join('')

    fetch(urlFinal)
        .then(async (res) => {
            const contentType = await res.headers.get('Content-Type')
            const blob = await response.blob()
            const file = new File([blob], "image.jpeg", { contentType })
        })
  }

当我将图像放到 Drop Here 时框，它将创建一个 Object File ，所以它会算作一个文件而不是一个 URL，我认为这就是你想要的，希望我能以某种方式帮助你。
将图片拖入后将 URL 作为对象文件放入 Drop Here Box