Html 5拖放到输入文件

Question

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

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

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

我将如何做到这一点？

提前致谢。

Answer 1

我来到这里寻找相同的答案。结束以下操作，看起来符合您的需要。

为您的图片投放框创建一个div，然后添加您的输入类型=＆＃34; file＆＃34;里面的div。根据需要设置高度和宽度。将不透明度设置为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>

===编辑===

忽略我的样式，你真的只需要使用带有input type = file的表单。样式/布局根据需要。

正如Shazoo指出的那样，拖放图像在IE中不起作用。适用于Firefox和Chrome。不确定Opera和Safari。出于安全原因，你不能在input type = file上使用JavaScript - 它只是像Jasny所说的那样只读，所以你必须依赖浏览器供应商允许的内容。

考虑到这一点，您可以让IE用户选择单击该字段来选择和上传文件。默认输入类型=＆＃34;文件＆＃34;在IE中提供此功能，因此只要您将输入保持可见，他们就应该看到它。 （默认边输入类型=文件）

过滤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和边缘的测试。如果它检测到版本，那么它将使用stopIeDefault来阻止默认拖放。如果某人拖拽并将其放在表单上，​​这会阻止IE加载图像。 （Edge似乎默认情况下会阻止此操作，因此您可能不需要像我一样调用stopIeDefault。）此外，您可以应用不同的样式或添加代码块或不处理IE的内容。根据w3schools的数据，截至2016年8月，IE浏览器的份额为5.2-6.2％：http://www.w3schools.com/browsers/default.asp，如果这有助于您决定做什么。

如果有人可以确认拖放是否适用于野生动物园或歌剧，请做。 ===编辑===

Answer 2

不，不能做到。丢弃的文件只能通过AJAX上传。

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