Commit e33cc619 by Dányi Bence

store: ajax upload GUI improved

parent 20fcdf2c
...@@ -249,15 +249,46 @@ $(function() { ...@@ -249,15 +249,46 @@ $(function() {
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
xhr.open('POST', self.uploadURL()); xhr.open('POST', self.uploadURL());
xhr.onload = function() { xhr.onload = function() {
$('.file-upload').removeClass('opened');
$('.file-upload .details').slideUp(700);
$('#upload-zone').show();
$('#upload-progress-text').hide();
self.uploadProgress('0%'); self.uploadProgress('0%');
self.uploadURL('/');
loadFolder(self.currentPath()); loadFolder(self.currentPath());
}; };
xhr.onerror =function(){
$('.file-upload').removeClass('opened');
$('.file-upload .details').slideUp(700);
$('#upload-zone').show();
$('#upload-progress-text').hide();
self.uploadProgress('0%');
self.uploadURL('/');
}
if(tests.progress) { if(tests.progress) {
$('#upload-zone').hide();
$('#upload-progress-text').show();
xhr.upload.onprogress = function(event) { xhr.upload.onprogress = function(event) {
if(event.lengthComputable) { if(event.lengthComputable) {
var complete = (event.loaded / event.total * 100 | 0); var complete = (event.loaded / event.total * 100 | 0);
//progress.value = progress.innerHTML = complete; //progress.value = progress.innerHTML = complete;
self.uploadProgress(parseInt(complete) + '%'); self.uploadProgress(parseInt(complete) + '%');
var suffix='B KB MB GB'.split(' ');
var l=event.loaded;
var t=event.total;
for(var i=0;l>1024;i++){
l/=1024;
}
l=l.toFixed(1)+' '+suffix[i];
for(var i=0;t>1024;i++){
t/=1024;
}
t=t.toFixed(1)+' '+suffix[i];
if(complete<100) {
$('#upload-progress-text').html('Feltöltés: '+l+'/'+t+' ('+(event.loaded / event.total * 100).toFixed(2)+'%)');
} else {
$('#upload-progress-text').html('Feltöltés: Mindjárt kész...');
}
} }
} }
} }
......
...@@ -85,6 +85,7 @@ ...@@ -85,6 +85,7 @@
A feltöltéshez húzza ide a fájlt. <a href="#" id="old-upload">Hagyományos fájltfeltöltési felület</a> A feltöltéshez húzza ide a fájlt. <a href="#" id="old-upload">Hagyományos fájltfeltöltési felület</a>
<img class="preview" /> <img class="preview" />
</div> </div>
<div style="display: none" id="upload-progress-text" class="upload-zone"></div>
<div style="display: none" class="upload-zone"> <div style="display: none" class="upload-zone">
<form action="/" method="POST" data-bind="attr: {action: uploadURL}" enctype="multipart/form-data"> <form action="/" method="POST" data-bind="attr: {action: uploadURL}" enctype="multipart/form-data">
<input type="file" name="data" /> <input type="file" name="data" />
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment