html5拖放文件 - 整個表單提交時上傳

Question

是否可以在表單提交中包含「拖放」文件？有很多選項可以異步上傳。

是否有可能捕獲文件數據並將其包含在表單字段中？

我使用Rails作爲我的服務器，以便爲理想的圖像數據將適合於像一個形式如下：

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

    </div> 

</form> 

Answer 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 

}