[英]How to submit form on file select without page reload?
我正在開發一個無線文件傳輸應用程序(HTTP Web 服務器),它包含一個帶有將文件上傳到服務器的表單的網站,即 android 應用程序
當我選擇一個非常小的文件時,生成的標題如下。
POST /?Upload HTTP/1.1
Host: 192.168.0.101:4567
Connection: keep-alive
Content-Length: 2968
Pragma: no-cache
Cache-Control: no-cache
Origin: http://192.168.0.101:4567
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.87 Safari/537.36
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryT0t2jgS72DnsVZRX
Accept: */*
DNT: 1
Referer: http://192.168.0.101:4567/
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.8
當我選擇一個更大的文件時,錯誤發生如下
控制台錯誤:(索引):637 拒絕設置不安全的標題“內容長度”
生成的標題
Provisional headers are shown
Content-Type:multipart/form-data; boundary=----WebKitFormBoundary0tFAb8kt90pwbuFO
Origin:http://192.168.0.101:4567
Referer:http://192.168.0.101:4567/
User-Agent:Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.87 Safari/537.36
Provisional headers are shown
Content-Type:multipart/form-data; boundary=----WebKitFormBoundary0tFAb8kt90pwbuFO
Origin:http://192.168.0.101:4567
Referer:http://192.168.0.101:4567/
User-Agent:Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.87 Safari/537.36
Provisional headers are shown
Content-Type:multipart/form-data; boundary=----WebKitFormBoundary0tFAb8kt90pwbuFO
Origin:http://192.168.0.101:4567
Referer:http://192.168.0.101:4567/
User-Agent:Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.87 Safari/537.36
代碼 :
<form id="uploadForm" method="post" enctype="multipart/form-data">
<input id="uploadPath" type="hidden" name="path">
<button class="file-upload">
<input id="fileUpload" onchange="uploadFile()" type="file" class="file-input">Upload
</button>
</form>
<script>
function uploadFile() {
var form = document.getElementById('uploadForm');
var path = form.elements.namedItem("path").value
var file = document.getElementById('fileUpload').files[0];
var formData = new FormData(form);
formData.append('file', file);
var http = new XMLHttpRequest();
http.open("POST", '/?Upload', true);
http.setRequestHeader("Content-length", file.size);
http.onreadystatechange = function () { //Call a function when the state changes.
if (http.readyState == 4 && http.status == 200) {
alert(http.responseText);
}
}
http.send(formData);
form.reset();
form.elements.namedItem("path").value = path;
}
</script>
這將偵聽文件輸入,當值發生變化時,意味着他們選擇了一個文件,它將使用您的表單向您指定的 url 發送一個 ajax 調用。 這應該提交表單而無需重新加載頁面。
<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
<script>
$(function () {
$("#fileUpload").on("change", function () {
$.ajax({
url: "upload.php",
method: "POST",
data: $("form").serialize(),
success: function (data) {
// success callback
}
});
});
});
</script>
您可能應該嘗試查看 AJAX。 通過從網絡服務器請求頁面片段,這將使更新頁面的一部分而無需重新加載成為可能。 然后使用頁面片段來更新頁面上的某些元素。 有關介紹,請參閱http://www.w3schools.com/ajax 。
您可以查看此解決方案( jQuery AJAX 提交表單)。 需要 JQuery 但很容易實現。
您可以嘗試只使用 Javascript 和 AJAX( 使用 AJAX、PHP 和 Javascript 提交表單),而無需依賴 JQuery。 這將是一個更復雜的構建過程,但是如果您計划構建更復雜的表單提交功能,它是最好的方法。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.