如何使 HTML5 上传进度条与输入类型提交一起使用
How to make HTML5 upload progress bar works with input type submit?
嗨,我目前正在处理一个上传进度条。
以下是显示上传进度条的代码:
<!DOCTYPE html>
<html>
<head>
<script>
/* Script written by Adam Khoury @ DevelopPHP.com */
/* Video Tutorial: http://www.youtube.com/watch?v=EraNFJiY0Eg */
function _(el){
return document.getElementById(el);
}
function uploadFile(){
var file = _("file1").files[0];
//alert(file.name+" | "+file.size+" | "+file.type);
var formdata = new FormData();
formdata.append("file1", file);
var ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", progressHandler, false);
ajax.addEventListener("load", completeHandler, false);
ajax.addEventListener("error", errorHandler, false);
ajax.addEventListener("abort", abortHandler, false);
ajax.open("POST", "mylistener.php");
ajax.send(formdata);
}
function progressHandler(event){
_("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
var percent = (event.loaded / event.total) * 100;
_("progressBar").value = Math.round(percent);
_("status").innerHTML = Math.round(percent)+"% uploaded... please wait";
}
function completeHandler(event){
_("status").innerHTML = event.target.responseText;
_("progressBar").value = 0;
}
function errorHandler(event){
_("status").innerHTML = "Upload Failed";
}
function abortHandler(event){
_("status").innerHTML = "Upload Aborted";
}
</script>
</head>
<body>
<h2>HTML5 File Upload Progress Bar Tutorial</h2>
<form id="upload_form" enctype="multipart/form-data" method="post">
<input type="file" name="file1" id="file1"><br>
<progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
<div id="status"></div>
<div id="loaded_n_total"></div>
<input type="button" value="Upload File" onclick="uploadFile()">
</form>
</body>
</html>
当我将此行更改为如下所示时: <form id="upload_form" enctype="multipart/form-data" action="mylistener.php" method="post">
和 <input type="submit" value="Upload File" onclick="uploadFile()">
请注意,我已将输入类型从 button
更改为 submit
。
这样,它给我错误"上传中止"而不是打印上传进度条。
当我这样做时,它正在提交表单,但它没有显示上传进度条。所以我的问题是如何在我的 HTML 表单中使用输入类型提交和 action="mylistener.php"并使上传进度条正常工作。这个Javascript的问题在哪里,所以它没有按照我想要的方式工作?
当您将:输入类型="按钮"更改为输入类型="提交"时页面实际上会重新加载。因此,它显示上传已中止。如果要将输入类型更改为"提交",请将以下代码行添加到 uploadFile 函数中:
function uploadFile(){
event.preventDefault();
event.stopPropagation();
//here is your rest of the code
}
现在你的代码可以工作了。
相关文章:
- 使用模式格式化Number类型输入中的值
- 在 JavaScript 中单击函数时两个日期类型输入之间的差异的代码
- 在codeigneter中按类型输入框显示数据库中的数据
- 已从'上传文件;文件'img字段中未显示类型输入字段
- 如何使用ReactTestUtils设置HTML5文件类型输入
- 检测用户拖动范围类型输入
- 无法在使用 Java 脚本创建的表单中设置提交类型输入
- 按钮类型输入上的点击事件不起作用
- 如何使用javascript更改隐藏类型输入字段的值
- sap.m中的自定义输入类型.输入sap-ui5
- 如何使用jquery动态添加/删除文件类型输入字段
- 提交事件未捕获提交类型输入
- Jquery - info/docs关于适用于表单中不同类型输入元素的属性列表
- 从Mobile Safari'日期/时间类型输入字段触发哪些事件?
- 饼状图II -动态值从范围类型输入
- 我可以在文件类型输入中显示文件大小吗?
- 新的webkit在数字类型输入中将十进制逗号转换为~ dot,反之亦然.该浏览器特性的Javascript名称
- 如何在javascript中验证具有相同名称的多个相同类型输入
- 邮件类型输入:如果邮件错误或正确,动态改变按钮的颜色/文本
- 如何将文件类型输入传递到javascript中,并将其用于另一个php页面