Allow users to start a new upload before the current upload has finished

This commit is contained in:
Robin Appelman 2011-07-20 15:50:42 +02:00
parent 5539f67135
commit 6b034ad2f9
3 changed files with 38 additions and 24 deletions

View File

@ -20,7 +20,7 @@
text-decoration: none;
}
#file_upload_form, #file_newfolder_form {
.file_upload_form, #file_newfolder_form {
display: inline;
margin-left:3em;
}
@ -29,23 +29,23 @@
display: none;
}
#file_upload_filename, #file_newfolder_name {
.file_upload_filename, #file_newfolder_name {
background-repeat: no-repeat;
background-position: 0.5em 0;
padding-left: 2em;
}
#file_upload_filename {
.file_upload_filename {
background-image:url(../img/file.png); font-weight:bold;
}
#file_upload_start {opacity:0;filter: alpha(opacity = 0);}
.file_upload_start {opacity:0;filter: alpha(opacity = 0);}
#file_newfolder_name {
background-image:url(../img/folder.png); font-weight:bold;
width: 14em;
}
#file_upload_start, #file_upload_filename{
.file_upload_start, .file_upload_filename{
position:absolute;
top:0px;
left:0px;
@ -53,7 +53,7 @@
font-size: 0.9em;
}
#file_upload_wrapper{
.file_upload_wrapper{
position:relative;
top:-1.2em;
left:-2em;
@ -66,7 +66,7 @@
width: 3em;
}
#file_upload_target {
.file_upload_target {
display: none;
}

View File

@ -143,21 +143,26 @@ $(document).ready(function() {
return false;
});
$('#file_upload_start').change(function(){
var files=$('#file_upload_start')[0].files;
$('#file_upload_target').load(function(){
var response=jQuery.parseJSON($('#file_upload_target').contents().find('body').text());
$('.file_upload_start').live('change',function(){
var form=$(this).parent().parent();
var uploadId=form.attr('data-upload-id');
var files=this.files;
var target=form.children('iframe');
target.load(function(){
var response=jQuery.parseJSON(target.contents().find('body').text());
//set mimetype and if needed filesize
for(var i=0;i<response.length;i++){
var file=response[i];
$('tr[data-file="'+file.name+'"]').attr('data-mime',file.mime);
if(size=='Pending'){
$('tr[data-file='+file.name+'] td.filesize').text(file.size);
if(response){
for(var i=0;i<response.length;i++){
var file=response[i];
$('tr[data-file="'+file.name+'"]').attr('data-mime',file.mime);
if(size=='Pending'){
$('tr[data-file='+file.name+'] td.filesize').text(file.size);
}
FileList.loadingDone(file.name);
}
FileList.loadingDone(file.name);
}
});
$('#file_upload_form').submit();
form.submit();
var date=new Date();
var uploadTime=formatDate(date);
for(var i=0;i<files.length;i++){
@ -168,11 +173,20 @@ $(document).ready(function() {
}
FileList.addFile(files[i].name,size,uploadTime,true);
}
//clone the upload form and hide the new one to allow users to start a new upload while the old one is still uploading
var clone=form.clone();
uploadId++;
clone.attr('data-upload-id',uploadId);
clone.attr('target','file_upload_target_'+uploadId);
clone.children('iframe').attr('name','file_upload_target_'+uploadId)
clone.insertBefore(form);
form.hide();
});
//add multiply file upload attribute to all browsers except konqueror (which crashes when it's used)
if(navigator.userAgent.search(/konqueror/i)==-1){
$('#file_upload_start').attr('multiple','multiple')
$('.file_upload_start').attr('multiple','multiple')
}
});

View File

@ -1,14 +1,14 @@
<div class="controls">
<div class="actions">
<form id="file_upload_form" action="ajax/upload.php" method="post" enctype="multipart/form-data" target="file_upload_target">
<form data-upload-id='1' class="file_upload_form" action="ajax/upload.php" method="post" enctype="multipart/form-data" target="file_upload_target_1">
<input type="hidden" name="MAX_FILE_SIZE" value="<?php echo $_["uploadMaxFilesize"] ?>" id="max_upload">
<input type="hidden" class="max_human_file_size" value="(max <?php echo $_["uploadMaxHumanFilesize"]; ?>)">
<input type="hidden" name="dir" value="<?php echo $_["dir"] ?>" id="dir">
<div id='file_upload_wrapper'>
<input class="prettybutton" id='file_upload_filename' value="Upload (max. <?php echo $_["uploadMaxHumanFilesize"];?>)"/>
<input class="prettybutton" type="file" id="file_upload_start" name='files[]'/>
<div class='file_upload_wrapper'>
<input class="prettybutton file_upload_filename" value="Upload (max. <?php echo $_["uploadMaxHumanFilesize"];?>)"/>
<input class="prettybutton file_upload_start" type="file" name='files[]'/>
</div>&nbsp;
<iframe id="file_upload_target" name="file_upload_target" src=""></iframe>
<iframe name="file_upload_target_1" class='file_upload_target' src=""></iframe>
</form>
<form id="file_newfolder_form">
<input type="text" class="prettybutton" name="file_newfolder_name" id="file_newfolder_name" value="New Folder" />&nbsp;