html5拖放文件-提交整个表单时上传

Posted 2023-05-08

【中文标题】html5拖放文件-提交整个表单时上传

【英文标题】：html5 drag and drop files - upload when entire form is submitted

【发布时间】：2012-08-27 02:46:58

【问题描述】：

是否可以在表单提交中包含“拖放”文件？有很多异步上传的选项。

是否可以捕获文件数据并将其包含在表单字段中？

我使用 Rails 作为我的服务器，因此理想情况下，图像的数据将适合如下形式：

<form multipart='multipart' >
  <select name='files[type_id]'>
     ...
     ...
  </select>
  <!-- FILE DATA ?  -->
  <div id="file_drop_spot">

  </div>

</form>

【参考方案1】：

我在上面发现了这个问题：drag drop files into standard html file input

我不相信这是可能的，但你可以达到效果。当您提交表单时，请阻止其默认行为并开始使用 ajax 上传文件。文件上传完成后，您再次指向表单并提交它，而不会阻止其默认行为。

类似：

<form id="form">
     <input type="text" name="someText"></input>
     <input id="submitButton" type="submit" onclick="uploadFile()"></input>
</form>

然后是javascript：

function uploadFile() 

    document.getElementById("submitButton").disabled = true;
    // Some ajax code to upload the file and then on the success:
    success: function() 

        document.getElementById("form").submit();

    
    return false; // Prevent the form from submitting

【讨论】：

这将是一种解决方法，因为尚未创建文件需要关联的记录

嗯，我明白了...但是 ajax 真的只是一个帖子，就好像它来自一个表单一样。我建议阅读表单实际如何发送文件数据，然后使用 ajax 发送整个内容。后端不应该需要基于 ajax 或普通表单提交的任何更改。我相信;-)