我正在尝试将少量文件上传到Firebase存储,并为每个上传文件显示单独的进度条,但是如果进入progress()和complete()函数,则无法传递任何当前正在上传的文件:-(
// DIV container for progress bars
const divProgressBarContainer = $('#divProgressBarContainer')
// File upload form input
const fileUpload = $('#fileUpload')
// Starting upload
fileUpload.on('change', function(e){
// Get File
const files = e.target.files
// Bars array
var bars = []
for (var i = 0, f; (f = files[i]); i++) {
// Adding some progress bars objects
bars.push({
progressBarId : 'progress_' + i,
progressBarText : beautifyFileName(f.name) + ' — 0%'
})
// Create a storage ref
var storageRef = firebase.storage().ref('json/' + f.name)
// Upload file
var task = storageRef.put(f)
// Update progress bar on changes
task.on('state_changed', function progress(snapshot){
let percentage = snapshot.bytesTransferred /
snapshot.totalBytes * 100
let name = beautifyFileName(snapshot.ref.name)
let id = '#progress_' + i
// Bootstrap 4 progress bar
$(id).width(percentage + '%')
$(id).html(name + ' — ' + percentage + '%')
},
function error(err){},
function complete(){}
)
}
// Adding progress bars to HTML
divProgressBarContainer.append(`${
bars.map((bar) =>
`<div class="progress mb-3"><div class="progress-bar progress-
bar-striped progress-bar-animated" role="progressbar" aria-
valuenow="0" aria-valuemin="0" aria-valuemax="100"
style="width: 0%"
id="${bar.progressBarId}">${bar.progressBarText}</div></div>`
).join('')
} `
)
})
// Extracting file name and UPPERCASE it
function beautifyFileName(string){
return string.split('.').slice(0, -1).join('.').toUpperCase()
}
我想为每个上载文件获得单独的进度,或者为所有文件至少获得一个进度条。