如何在不重新加载页面的情况下选择文件提交表单
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调用。这应该在不重新加载页面的情况下提交表单。
更新以包含对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>
您可能应该尝试研究AJAX。这将使您可以通过从Web服务器请求页面片段来更新部分页面,而无需重新加载。页面片段随后用于更新页面上的某些元素。看见http://www.w3schools.com/ajax介绍。
您可以查看此解决方案(jQuery AJAX提交表单)。需要JQuery,但易于实现。
您可以尝试只使用Javascript和AJAX(使用AJAX、PHP和Javascript提交表单),而不需要依赖JQuery。这将是一个更复杂的构建过程,但如果您计划构建更复杂的表单提交功能,这是最好的方法。
相关文章:
- 在我的情况下,使用带有变量失败的 jquery 选择器
- 如何创建只允许用户在选中前一个复选框的情况下选择复选框的复选框验证
- 获取 HTML 5 音频控制文件位置并在不使用 id 选择器的情况下更新 src
- 如何在不重新加载页面的情况下选择文件提交表单
- Javascript:检索在没有 JQuery 的情况下选择了哪个下拉菜单
- Jquery 如何在不作为父级的情况下选择低于 id/class 的元素
- 如何更新p的标签:在primefaces中ajax调用后,在不关闭组件的情况下选择CheckboxMenu
- 是否有任何处理程序可以检测在没有jQuery的情况下选择字段是否有任何选项
- 如何使第一个单选按钮在默认情况下选择一个列表中建立的for in循环使用trick
- 如何在不使用id的情况下选择javascript中的第二个单选按钮
- JavasScript:如何防止用户在不使用禁用/指针事件的情况下选择选择选项列表中的任何内容
- 选项:第一个孩子不会在所有情况下选择相同的选项
- 在没有键盘的情况下选择和取消选择列表中的多个选项
- 在不知道索引的情况下选择jquery tools选项卡
- Angular.js在不使用ng-option指令的情况下选择选项
- 在不使用Select属性的情况下选择一个Select选项(做一个假的鼠标点击)
- 在安装了Opera Mini的功能手机上,可以在不使用javascript的情况下选择要上传的文件来触发UI更改
- 使用普通JavaScript,在不按索引或ID进行选择的情况下选择和删除html选择选项
- 如何知道是否在不知道名称或 ID 的情况下选择了第 7 个单选按钮
- 为什么在某些情况下选择铁页不起作用