javascript - Html 5 拖放至输入文件

Question

我不知道这是否可行，我似乎找不到任何东西。

我想要的是为用户提供“拖放”图像或使用普通 html 文件输入框的选项。

在保存表单之前，我不会上传图片。所以我想拖放区域只会更新字段？

我该怎么做呢？

提前致谢。

Answer 1

我来这里寻找相同的答案。最后执行以下操作，这看起来符合您的需要。

为您的图像下拉框创建一个 div，然后在该 div 中添加您的 input type="file"。根据需要设置高度和宽度。将不透明度设置为 0。现在您的输入填充了 div，看不到，但仍然有效。

<div class="divClass">
  <input class="inputClass" name="inputName" type="file">
</div>

下面的样式

<Style>
.divClass{
  position: relative;
  // anything else
}
.inputClass{
  opacity: 0;
  position: absolute;
  top:0;
  left: 0;
  height: x // as desired
  width: x // as desired
}
</style>

===编辑===

忽略我上面的样式，您真的只需要使用输入类型=文件的表单。根据需要设置样式/布局。

正如 Shazoo 所指出的，拖放图像在 IE 中不起作用。适用于 Firefox 和 Chrome。不确定 Opera 和 Safari。出于安全原因，您不能在输入 type=file 上使用 JavaScript——正如 Jasny 所说，它是只读的，因此您必须依赖浏览器 vendor 允许的内容。

考虑到这一点，您可以只为 IE 用户提供单击该字段以选择和上传文件的选项。 IE 中默认的 input type="file"提供了这种能力，所以只要你让输入可见，他们就应该能看到它。 (默认边输入类型=文件)

IE 示例过滤器(基于 https://stackoverflow.com/a/31757969/3136874 )

function stopIeDefault(){
  window.addEventListener("dragover",function(e){
    e = e || event;
    e.preventDefault();
  },false);
    window.addEventListener("drop",function(e){
    e = e || event;
    e.preventDefault();
  },false);
}
if (/MSIE 10/i.test(navigator.userAgent)) {
  // This is internet explorer 10
  stopIeDefault()
}

if (/MSIE 9/i.test(navigator.userAgent) || /rv:11.0/i.test(navigator.userAgent)) {
  // This is internet explorer 9 or 11
  stopIeDefault()
}

if (/Edge\/\d./i.test(navigator.userAgent)){
  // This is Microsoft Edge
  stopIeDefault()
}   

这会测试 IE 和 edge。如果它检测到一个版本，那么它将使用 stopIeDefault 来防止拖放的默认值。如果有人将图像拖放到表单上，这会阻止 IE 加载图像。 (Edge 似乎默认阻止这种情况，因此您可能不需要像我一样调用 stopIeDefault。)此外，您可以应用不同的样式或添加代码块或不处理 IE 的内容。根据 w3schools 的数据，截至 2016 年 8 月，IE 浏览器的份额为 5.2-6.2%:http://www.w3schools.com/browsers/default.asp ，如果这有助于您决定要做什么。

如果有人可以确认拖放是否适用于 Safari 或 Opera，请确认。 ===编辑===