带有JavaScript的多个文件上传进度条
mutiple file upload progressbars with javascript
我想上传多个文件并显示它们的进度。我正在尝试以下代码。这是我的 html 代码...
<div id='albumBox'>
<input type='file' multiple name='newsfeedAlbum[]' id='newsfeedAlbum' onchange='uploadNewsfeedImages()' />
<div>
<div id='uploadingImages'>
</div>
<div>
<preogress id='progressBar'> </progress>
</div>
<div>
<input type='button' id='albumButton' value='post' disabled />
</div>
这是我的JavaScript代码...
function uploadNewsfeedImages()
{
alert(document.getElementById("newsfeedAlbum").files.length);
var files = document.getElementById("newsfeedAlbum").files;
for(var i = 0;i < files.length;i++)
{
var file = files[i];
//alert("file name is "+files.item(i).name);
var formData = new FormData();
formData.append("image",file);
var xhr = new XMLHttpRequest();
xhr.open("POST","add_newsfeed.php",true);
alert(i);
xhr.upload.onprogress = function()
{
alert("bujji" + i);
}
xhr.send(formData);
}
}
function showUploadProgress(event)
{
var uploaded = event.loaded/event.total;
uploaded = Math.floor(uploaded*100);
document.getElementById("progressBar").value = uploaded;
}
但是当我尝试上传两张图像并在 upload.progress 事件上发出警报时,它会提醒 bujji2 和 bujji2 而不是 bujji0 和 bujji1。如何处理单个上传进度事件...。
这是一个范围问题。for 循环将在 onprogress 事件触发时完成,因此每次 onprogress 触发时 'i' 将为 2,因为您的 'for 循环' 已经完成运行。
您可以将 onprogress 函数包装在闭包中以获得所需的效果。
xhr.upload.onprogress = (function() {
return function() {
alert('bujji' + i);
};
}());
你需要保存你的i
,因为它会在onprogress
触发之前被更改。
xhr.upload.fileNum = i;
xhr.upload.onprogress = function()
{
alert("bujji" + this.fileNum);
}
xhr.send(formData);
并阅读先前答案的解释:Creating_closures_in_loops.3A_A_common_error
相关文章:
- Word文件(Javascript?)中有哪些字符
- 获取二进制数据并将其保存为.mp3文件Javascript
- 创建包含文本内容的新 Google 云端硬盘文件 (javascript)
- 将从 URL 输出的 JSON 保存到文件 javascript
- 单个页面上的多个音频文件javascript
- 将表单数据写入json文件-javascript
- imacros提取两部分数据+连接常量保存到文件javascript
- 检索 XML 文件 (JavaScript)
- 如何将画布图像“data:image/jpeg;base64,.”转换为普通图像文件 - JavaScript
- 用固定的行名称附加文件 javascript
- 打开并读取二进制文件(JavaScript)
- 将 emacs 用于大型多文件 JavaScript 项目
- 加载外部javascript,但HTTP请求重复一个文件javascript
- 从2D数组创建图像文件-JavaScript
- 正在读取文本文件Javascript
- 通过django将STATIC_URL传递到文件javascript
- 从输入文件javascript中获取一些数据
- Django”;静态“;文件-Javascript
- 上传两次相同的图像文件-Javascript
- 从文本文件javascript中读取行/变量