如何模仿JavaScript文件對象的表單提交？

所以我有一個從桌面拖放到一個區域的文件對象。現在，所有的東西都很花哨，直到我必須通過Ajax將其上傳到Django後端。我想利用漂亮的Django utils的如request.FILES等如何模仿JavaScript文件對象的表單提交？

現在，我正在與一些現有的代碼在這裏搞亂：

xhr.open("post", s.post, true); 

      // Set appropriate headers 
      xhr.setRequestHeader("content-type", "multipart/form-data"); 
      xhr.setRequestHeader("x-file-name", file.fileName); 
      xhr.setRequestHeader("x-file-size", file.fileSize); 
      xhr.setRequestHeader("x-file-type", file. 
      xhr.send(file);

嘗試，因爲我可能，這不似乎是通過提交文件輸入來模擬表單。有什麼我失蹤了嗎？

謝謝！

來源

2011-06-03 nubela

AJAX不允許宣誓上傳文件嗎？是的，剛剛確認。你可以利用包含文件上傳字段和一些javascript的iframe來解決限制（這裏有一些插件功能），但是通過XHR是純粹的禁止。 – 2011-06-03 15:02:06

@chrisdpratt - 歡迎使用HTML5 :-) – Pointy 2011-06-03 15:06:59

我完全錯過了該標籤，並且我仍然採用最佳的瀏覽器支持模式。 ;） – 2011-06-03 15:15:10

您需要創建一個「FormData」對象，然後將該文件作爲參數附加到該對象。

var fd = new FormData(); 
    fd.append("theFile", yourFileObject); 
    // 
    // ... set up the xhr ... 
    // 
    xhr.send(fd);

很顯然，在HTML5環境下這只是工作，但如果你使用文件的東西，也許你處理事情搞亂。

來源

2011-06-03 15:01:56 Pointy

xhr有什麼理智的默認值？ – nubela 2011-06-03 15:08:03

那麼，你需要給它一個URL等。沒有什麼別的。 [Here]（http://www.matlus.com/html5-file-upload-with-progress/）是一個隨機的博客文章，其中包含一些示例代碼（也包含其他內容）。你不必設置標題的東西;新的HTML5 xhr對象知道如何做到這一點。 – Pointy 2011-06-03 15:10:31

你確定這是我需要的嗎？我已經通過formdata體驗過，它似乎發送得很好。但仍然django仍然沒有看到它作爲一個文件。 – nubela 2011-06-03 15:24:31

不幸的是，您不能使用XmlHttpRequest對象上傳文件，因爲它不受支持。

已經存在hacky變通方法（比如使用iFrame），最近有一個新的File api（https://developer.mozilla.org/en/using_files_from_web_applications）用於支持HTML 5的瀏覽器。

如果您在stackoverflow上搜索了更多內容，可以找到有關如何執行解決方法的示例。

來源

2011-06-03 15:02:10 junkyspace

它在HTML5中得到了支持，而HTML5世界就是在這裏可以找到諸如正在討論的「File」對象之類的東西的地方。然而，你是對的，這是一件新事物。 – Pointy 2011-06-03 15:03:12

如何模仿JavaScript文件對象的表單提交？

回答

相關問題