如何提交没有页面重新加载的文件选择？ [英] How to submit form on file select without page reload?
本文介绍了如何提交没有页面重新加载的文件选择？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
POST /？上传HTTP / 1.1
主机：192.168.0.101:4567
连接：keep-alive
内容长度：2968
Pragma：no-cache
Cache-Control：no-cache
原产地： http://192.168.0.101:4567
用户代理：Mozilla / 5.0（Windows NT 6.3; WOW64）AppleWebKit / 537.36（KHTML，如Gecko）Chrome / 49.0.2623.87 Safari / 537.36
Content-类型：multipart / form-data; border = ---- WebKitFormBoundaryT0t2jgS72DnsVZRX
Accept：* / *
DNT：1
Referer：http://192.168.0.101:4567/
Accept-Encoding：gzip，deflate
Accept-Language：en-US，en; q = 0.8
一个较大的文件然后错误发生如下
控制台错误：（index）：637拒绝设置不安全的标题Content-length
生成的头文件
显示临时头文件
Content-Type：multipart / form-data ; border = ---- 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，如Gecko）Chrome / 49.0.2623.87 Safari / 537.36
显示临时标题
Content-Type：multipart / form-data; border = ---- 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，如Gecko）Chrome / 49.0.2623.87 Safari / 537.36
显示临时标题
Content-Type：multipart / form-data; border = ---- 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，如Gecko）Chrome / 49.0.2623.87 Safari / 537.36
<代码：
< form id =uploadFormmethod =postenctype =multipart / form-data >
< input id =uploadPathtype =hiddenname =path>
< button class =file-upload>
< input id =fileUploadonchange =uploadFile（）type =fileclass =file-input>上传
< / 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（）{//当状态改变时调用一个函数。
if（http.readyState == 4&& http.status == 200）{
alert（http.responseText）;
}
}
http.send（formData）;
form.reset（）;
form.elements.namedItem（path）。value = path;
}
< / script>
解决方案
这将侦听文件输入，值的变化，这意味着他们已经选择了一个文件，它会发送一个Ajax调用你的表单到你指定的url。这应该提交没有页面重新加载的表单。
更新包含对jQuery的引用
< script src = https://code.jquery.com/jquery-2.2.2.min.js\"></script>
< script>
$（函数（）{
$（＃fileUpload）on（change，function（）{
$ .ajax（{
url：upload。 （），
方法：POST，
data：$（form）。 b $ b}
}）;
}）;
}）;
< / script>
I'm developing an wireless file transfer app (HTTP Web Server), it contains a website with a form to upload file to the server i.e android app
When I select a file of very less size header generated is as below.
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
And when I select a larger file then and error occurs as follow
Console error : (index):637 Refused to set unsafe header "Content-length"
Header generated
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
Code :
<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>
解决方案
This will listen to the file input, and when the value changes, meaning they have selected a file, it will send an ajax call with your form to the url you specify. This should submit the form without a page reload.
Updated to include reference to jQuery
<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>
这篇关于如何提交没有页面重新加载的文件选择？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
