Html 5 拖放到输入文件答案

【问题标题】：Html 5 drag and drop to input fileHtml 5 拖放到输入文件
【发布时间】：2014-02-05 09:29:26
【问题描述】：

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

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

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

我该怎么做呢？

提前致谢。

【问题讨论】：

标签： javascript php jquery html forms

【解决方案1】：

不，这是不可能的。丢弃的文件只能通过 AJAX 上传。

以普通 HTML 格式上传文件的唯一方法是通过 <input type="file"> 并且文件输入是只读。

【讨论】：

【解决方案2】：

我来这里是为了寻找相同的答案。最终执行以下操作，看起来符合您的需求。

为您的图片放置框创建一个 div，然后在该 div 中添加您的输入 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 所说，它是只读的，因此您必须依赖浏览器供应商允许的内容。

考虑到这一点，您可以让 IE 用户选择单击字段来选择和上传文件。 IE 中的默认输入 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 来防止 Default 进行拖放。如果有人将图像拖放到表单上，这可以防止 IE 加载图像。（默认情况下，Edge 似乎会阻止这种情况，因此您可能不需要像我一样调用 stopIeDefault。）此外，您可以应用不同的样式或添加代码块或不处理 IE 的内容。根据 w3schools 的数据，截至 2016 年 8 月，IE 浏览器份额为 5.2-6.2%：http://www.w3schools.com/browsers/default.asp，如果这有助于您决定做什么。

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

【讨论】：