ajax jquery multiple file upload progress bars not working
I'm trying to make a upload progress bar for my image uploads, so far I am
currently able to upload the files to my server. The problem I am having
occurs when adding multiple files at once, only one progress bar goes
above the 0% uploaded mark.
I thought it may be better to code dump the HTML and Js as the problem
could be anywhere, sorry about the large amount of code.
HTML;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Image uploader</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Secure Image upload PHP plugin">
<!-- styles -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<style>
body { padding-top: 60px; /* 60px to make the container go all the way
to the bottom of the topbar */ }
/* Custom container */
.container-narrow {
margin: 0 auto;
max-width: 700px;
}
.container-narrow > hr {
margin: 30px 0;
}
/* Supporting marketing content */
.marketing {
margin: 60px 0;
}
.marketing p + h4 {
margin-top: 28px;
}
#upload ul li p{
width: 144px;
overflow: hidden;
white-space: nowrap;
color: #EEE;
font-size: 16px;
font-weight: bold;
position: absolute;
top: 20px;
left: 100px;
}
#upload ul{
list-style:none;
margin:0 -30px;
border-top:1px solid #2b2e31;
border-bottom:1px solid #3d4043;
}
#upload ul li{
background-color:#333639;
background-image:-webkit-linear-gradient(top, #333639, #303335);
background-image:-moz-linear-gradient(top, #333639, #303335);
background-image:linear-gradient(top, #333639, #303335);
border-top:1px solid #3d4043;
border-bottom:1px solid #2b2e31;
padding:15px;
height: 52px;
position: relative;
}
#upload ul li i{
font-weight: normal;
font-style:normal;
color:#7f7f7f;
display:block;
}
#upload ul li canvas{
top: 15px;
left: 32px;
position: absolute;
}
#upload ul li span{
width: 15px;
height: 12px;
background: url('../img/icons.png') no-repeat;
position: absolute;
top: 34px;
right: 33px;
cursor:pointer;
}
#upload ul li.working span{
height: 16px;
background-position: 0 -12px;
}
#upload ul li.error p{
color:red;
}
</style>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<!-- JavaScript -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="assets/js/bootstrap.js"></script>
<script src="assets/js/jquery.knob.js"></script>
<!-- jQuery File Upload Dependencies -->
<script src="assets/js/jquery.ui.widget.js"></script>
<script src="assets/js/jquery.iframe-transport.js"></script>
<script src="assets/js/jquery.fileupload.js"></script>
<!-- Our main JS file -->
<script src="assets/js/script.js"></script>
<!-- fav and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.ico">
</head>
<body>
<div class="container-narrow">
<div class="masthead">
<ul class="nav nav-pills pull-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<h3 class="muted">Project name</h3>
</div>
<hr>
<form id="upload" method="POST" action="handler.php"
enctype="multipart/form-data">
<div id="drop">
Drop Here
<a>Browse</a>
<input type="file" name="file" multiple />
</div>
<ul>
<!-- The file uploads will be shown here -->
</ul>
</form>
</div>
</div> <!-- /container -->
</body>
</html>
JS;
$(function(){
function makeid()
{
var text = "";
var possible =
"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for( var i=0; i < 5; i++ )
text += possible.charAt(Math.floor(Math.random() *
possible.length));
return text;
}
var ul = $('#upload ul');
$('#drop a').click(function(){
// Simulate a click on the file input button
// to show the file browser dialog
$(this).parent().find('input').click();
});
// Initialize the jQuery File Upload plugin
$('#upload').fileupload({
// This element will accept file drag/drop uploading
dropZone: $('#drop'),
// This function is called when a file is added to the queue;
// either via the browse button, or via drag/drop:
add: function (e, data) {
window.theid = makeid();
var tpl = $('<li class="working"><div class="progress"><div
class="bar" id="'+theid+'" style="width:
0%"></div><p></p><span></span></li>');
// Append the file name and file size
tpl.find('p').text(data.files[0].name).append('<i>' +
formatFileSize(data.files[0].size) + '</i>');
// Add the HTML to the UL element
data.context = tpl.appendTo(ul);
// Listen for clicks on the cancel icon
tpl.find('span').click(function(){
if(tpl.hasClass('working')){
jqXHR.abort();
}
tpl.fadeOut(function(){
tpl.remove();
});
});
// Automatically upload the file once it is added to the queue
var jqXHR = data.submit();
},
progress: function(e, data){
// Calculate the completion percentage of the upload
var progress = parseInt(data.loaded / data.total * 100, 10);
// Update the hidden input field and trigger a change
// so that the jQuery knob plugin knows to update the dial
//data.context.find('input').val(progress).change();
$('#'+theid).css({ "width": progress+'%'});
if(progress == 100){
data.context.removeClass('working');
}
},
fail:function(e, data){
// Something has gone wrong!
data.context.addClass('error');
}
});
// Prevent the default action when a file is dropped on the window
$(document).on('drop dragover', function (e) {
e.preventDefault();
});
// Helper function that formats the file sizes
function formatFileSize(bytes) {
if (typeof bytes !== 'number') {
return '';
}
if (bytes >= 1000000000) {
return (bytes / 1000000000).toFixed(2) + ' GB';
}
if (bytes >= 1000000) {
return (bytes / 1000000).toFixed(2) + ' MB';
}
return (bytes / 1000).toFixed(2) + ' KB';
}
});
No comments:
Post a Comment