个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
我的代码几乎可以正常运行，但事件监听器“Progress”未触发，因此我无法跟踪上传进度。
事件监听器“Load”正在触发，我的其余代码正在执行，所以我不知所措。有人有什么建议吗？
$("#myForm").submit(function(){
var xhr = new XMLHttpRequest();
//Progress Tracking
xhr.upload.addEventListener("progress", function(e){
if(e.lengthComputable){
alert('test');
var percentage = Math.round((e.loaded * 100) / e.total);
$("#myProgress").innerHTML(percentage + '%');
$("#Progress").val(percentage);
}
}, false);
//Added just to test that something was firing.
xhr.addEventListener("load", function(){alert('load');}, false);
xhr.addEventListener("error", function(){alert('error');}, false);
xhr.addEventListener("abort", function(){alert('abort');}, false);
//Status Tracking
xhr.open(this.method, this.action, true);
xhr.setRequestHeader("X-FILENAME", this.name);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
$('#myForm')[0].reset();
}
};
//Submit Data
var fd = new FormData();
fd.append("text", $('#text').val());
fd.append("file", $('#file')[0].files[0]);
xhr.send(fd);
return false;
});
最佳答案
由于您使用 XMLHttpRequest 和 FormData...所以现代浏览器(chrome、safari、ie10、ios、android)
这是一个非常简短的 ajax 版本。
function ajax(a,b,e,d,c){//Url,callback,method,formdata or{key:val},placeholder
c=new XMLHttpRequest;
c.onload=b;
c.open(e||'get',a);
c.send(d||null)
}
用法
ajax('index.html',callback);
// does a get query to index.html and calls the callback onload
ajax('upload.php',callback,'post',new FormData(form));
//posts the whole form to the upload.php and calls the callback onload
现在您需要进度事件。
如果您想添加多个事件处理程序，addEventListener 很好，但因为您只需要一个进度处理程序，xhr.onprogess 和 xhr.upload.onprogress 就足够了。
所以:
function ajax(a,b,e,d,f,g,c){
c=new XMLHttpRequest;
!f||(c.upload.onprogress=f);
!g||(c.onprogress=g);
c.onload=b;
c.open(e||'get',a);
c.send(d||null)
}
在这种情况下，我们破坏了这个先前创建的函数的可用性，但我们可以做更多。
/*
a=url - index.php,data.json,script.js
b=callback - function(){console.log(this.response)}
e=method - post,get ?put ?delete
d=formdata or object - new FormData(form) or {key:val}
f=upload progress func - function(){console.log(e.loaded/e.total*100>>0)}
g=download progress func - ""
c=this is just a placeholder - -----
*/
现在关于您的功能，您只需创建一些简短的代码来为您完成其余的工作:
var form;
function uploadProgress(e){
console.log(e.lengthComputable?(e.loaded/e.total*100>>0)+'%':'NO SIZE');
}
function uploadThatStuff(){
ajax('upload.php',finish,'post',new FormData(form),uploadProgress);
}
function finish(){
console.log('upload finished',this.response);
}
window.onload=function(){
form=document.getElementsByTagName('form')[0];
form.onsubmit=uploadThatStuff;
}
只需替换 yourForm & upload.php ... 并添加第二个 ajax 函数
有问题就问
作为测试 php 你可以使用
<?php
print_r(array($_FILES,$_POST,$_GET));
?>
编辑
带有进度条的完整工作示例
<?php
if($_FILES){
print_r(array($_FILES,$_POST));
}else{
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Upload</title>
<style>
body>div{
width:300px;
height:20px;
border:1px solid rgba(0,0,0,0.5);
}
body>div>div{
width:0%;
height:100%;
background-color:green;
}
</style>
<script>
var form,progress,result;
function ajax(a,b,e,d,f,g,c){
c=new XMLHttpRequest;
!f||(c.upload.onprogress=f);
!g||(c.onprogress=g);
c.onload=b;
c.open(e||'get',a);
c.send(d||null)
}
function uploadProgress(e){
e=e||window.event;
progress.firstChild.style.width=((e.loaded||e.position)/(e.total||e.totalSize)*100>>0)+'%';
}
function uploadThatStuff(e){
e=e||window.event;
e.preventDefault();
//form.title.value?form.file.files[0]?
ajax('upload.php',finish,'post',new FormData(form),uploadProgress)
//:alert('Please add a file'):alert('Please add a title');
}
function finish(e){
result.textContent=this.response||(e=e||window.event,e.target=e.target||e.srcElement,e.target.response);
}
window.onload=function(){
form=document.getElementsByTagName('form')[0];
form.onsubmit=uploadThatStuff;
progress=document.getElementsByTagName('div')[0];
result=document.getElementsByTagName('pre')[0];
}
</script>
</head>
<body>
<form>
<input name="title">title<br>
<input type="file" name="file"><br>
<input type="submit" value="Send">
</form>
<div><div></div></div>
<pre></pre>
</body>
</html>
<?php
}
?>
粘贴到文本文件中并另存为 upload.php
关于javascript - addEventListener Progress 未触发，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20359549/
27
4
0
我想在按下按钮时打开一个表单，然后在完成表单后创建另一个按钮以将数据存储在对象中。 我这样做了，但在第二个 addEventListener 中它给了我这个错误: cannot read proper
这是我实际代码的简化版本。 有三个复选框和按钮(每个编号为 0、1、2)和一个提交按钮。简而言之，如果您选中复选框编号 1 和 2，单击提交，按钮 1 和 2 将被着色。现在您可以单击任何彩色按钮，它
问题代码 var el = document.getElementById("searchcharm_'"+touch_id+"'"); el.addEventListener('click',
window.document.addEventListener = function(event) {...} window.addEventListener = function(event) {
这段代码块有什么区别: var xhr = new XMLHttpRequest(); xhr.upload.addEventListener("progress", uploadProgress,
在使用 PhoneGap 时，它有一些使用 document.addEventListener 的默认 JavaScript 代码，但我有自己的代码使用 window.addEventListener
当我运行这段代码时，为什么 .body 事件先触发？ document.addEventListener('click', function() { console.log('The docume
我将带有循环的 addEventListener 添加到一些 anchor 元素 products 中，如下所示: for(var j=0;j
所以我的代码可以按我想要的方式工作，但是大多数(IE 除外)调试器都会向我抛出此错误: 未捕获类型错误:无法读取未定义的属性“addEventListener” 这是代码: //Get all ele
我真的不知道为什么这不起作用。在我的 HTML 中，如果我将脚本放在 head 部分，我会在控制台中收到以下错误: Uncaught TypeError: Cannot read property '
在 React 中，当你有一个带有 onClick 属性的元素时，很容易使用 Enzyme 的 .simulate("click") 方法来点击它。然而，在我的代码库中有一个示例，其中一个元素被 Re
问候，由于某种原因，当我单击按钮时，我的 -addEventListener 没有执行。任何人都可以帮忙这是我的代码: function elNegro() { alert("Thank Yo
我正在将我的一些代码从 onClick 更改为 addEventListener，因为我已经阅读了各种好处，并且出于关注点分离的目的。然而，我遇到的问题之一是，虽然使用 onClick，我能够调用一个
我正在尝试向我在循环中生成的某些元素添加事件监听器。我必须使用 div.lastChild - 虽然在这个例子中它非常愚蠢。但这只是演示: var func = function() {
我在将事件监听器添加到 JS 时遇到问题...如果我将按钮与 onclick 属性连接，它会起作用，但如果我在 HTML 中删除它并尝试添加 eventListener('click', myFunc
我不知道为什么，但是当我点击“按钮”时什么也没有发生... 控制台中没有消息，没有错误。如何解决？ JS var bird = (function(){ let button = doc
我正在绘制一个方框网格，希望能够单击每个方框并使用 SocketIO 将带有其 ID 的通知发送到服务器 let boxes = document.querySelecto
我想是新手问题。 以下代码是我在文档就绪时调用的函数的一部分。它旨在在鼠标移动时永久返回当前鼠标位置的值。 正在发生的奇怪事情:在文档就绪时移动鼠标不会将任何内容记录到控制台。我知道 mouse_mo
我是 Flash 的新手，我似乎无法完成这个简单的操作。 (我正在使用 ActionScript 3.0) 我在我的编辑器中创建了一个输入文本框。实例名称是“测试”。在我的 Action 编辑器中，我
我有一个像 那些标签包含一些内容，我想打开/关闭它们，但仅使用纯 javascript。我已经尝试过使用 document.querySelectorAll
我是一名优秀的程序员,十分优秀！