我的 AJAX formData 對象有問題。如果在輸入中選擇一個文件并使用 AJAX 發送該文件，則數組為空。我希望有人能幫助我解決這個問題。下面是我的代碼HTML 和 JavaScript <form method="post" id="quoteform"> <input type="file" name="uploadfile" id="quote"/> <input type="submit" value="upload"/> </form> <script type="text/javascript"> document.getElementById("quoteform").addEventListener("submit", function(){ var files = document.getElementById("quote").files; var formData = new FormData(); for (var i = 0; i < files.length; i++) { var file = files[i] formData.append('files[]', file); } var xhttp = new XMLHttpRequest(); xhttp.open("POST", "linktophpfile.php", true); xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhttp.send('upload='+formData); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { alert(this.responseText); } } event.preventDefault(); }); </script>PHP<?phpif(isset($_POST['upload'])){ print_r($_FILES);}?>PHP 文件返回 Array ( )
1 回答
HUWWW
TA貢獻1874條經驗 獲得超12個贊
當您上傳文件時，您將無法使用，
application/x-www-form-urlencoded您必須使用multipart/form-data你不應該將字符串與 formData 混合，
send('upload='+formData)它只會導致你上傳等于upload=[Object object]
您應該只發送 formData 并讓 XHR 或 Fetch 自動為您處理內容類型。
如果您想要一個數組，那么我想您也想要該屬性
mulitple？為了更好的衡量，你總是可以添加required和accept="image/*, .txt"如果您只使用接受表單元素的第一個構造函數參數，則無需手動將所有文件添加到表單數據中，表單中的所有內容都將被添加
<form method="POST" action="https://httpbin.org/post" id="quoteform" encoding="multipart/form-data">
<input multiple type="file" name="files[]" id="quote" required />
<input type="submit" value="upload"/>
</form>
<script>
// html (xml) should mark the settings, behavior as it mostly always have done
// in all years way back and the js should provide enhancement and
// be more generally written to enhance the site (if js where
// to be turned off - most unlikely, I for once have it disabled in my phone)
// static sites works better without ads + annoying cookie popups
// it's a good thing Brave have quick toggle to enable scrips for js-only pages
function ajaxify (evt) {
evt.preventDefault()
var form = evt.target
var formData = new FormData(form)
fetch(form.action, {
method: form.method,
body: formData
}).then(res => res.text()).then(alert)
}
document.getElementById("quoteform").addEventListener("submit", ajaxify)
</script>
- 1 回答
- 0 關注
- 216 瀏覽
添加回答
舉報
0/150
提交
取消