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

时间:2012-09-01 16:55:49

标签: javascript html5

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

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

我正在使用Rails作为我的服务器,因此理想情况下,图像的数据将适合以下形式:

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

  </div>

</form>

1 个答案:

答案 0 :(得分:0)

我发现了这个问题: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

}