1
0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-25 06:33:48 +00:00

[upload/update] fixed bug, modified bar style and improved code

This commit is contained in:
llj
2012-12-08 20:11:39 +08:00
parent 0c554c20e6
commit 123b0315e8
5 changed files with 73 additions and 89 deletions

View File

@@ -1337,22 +1337,17 @@ textarea:-moz-placeholder {/* for FF */
#upload-file-form .MultiFile-remove:hover {
text-decoration:none;
}
#upload-progress {
.upload-progress-con,
.upload-cancel {
margin-top:.8em;
}
#task-progress-bar {/*for progress container*/
width:95%;
.upload-progress-bar {/*for progress container*/
height:1em;
}
#task-progress-bar .ui-progressbar-value {/*for progress*/
background:#e83;
margin:0;
}
#task-progress-bar {
margin-top:-3px;
}
#upload-cancel {
margin-top:.8em;
.upload-progress-bar .ui-progressbar-value {/*for progress*/
background:#e83;
margin:0;
}
/* file view online, file edit */

View File

@@ -3,25 +3,23 @@
{% block extra_script %}
<script type="text/javascript">
// Update progress bar
function update_progress_info() {
var dialog_id = '{{ dialog_id }}';
function updateProgress() {
$.ajax({
url: '{{ httpserver_root }}/upload_progress/?X-Progress-ID=' + '{{ uuid }}' + '&callback=?',
dataType: 'jsonp',
cache: false,
success: function(data) {
if (data) {
$(dialog_id + ' #upload-progress-text', window.parent.document).html(filesizeformat(data.uploaded, 2) + ' / ' + filesizeformat(data.length, 2));
$(dialog_id + ' #task-progress-bar', window.parent.document).removeClass('hide').progressbar({
$('#{{ upload_progress_con_id }} .upload-progress-text', window.parent.document).html(filesizeformat(data.uploaded, 2) + ' / ' + filesizeformat(data.length, 2));
$('#{{ upload_progress_con_id }} .upload-progress-bar', window.parent.document).progressbar({
value: data.uploaded / data.length * 100
});
}
}
});
setTimeout(update_progress_info, 1000);
setTimeout(updateProgress, 1000);
};
update_progress_info();
updateProgress();
</script>
{% endblock %}

View File

@@ -179,12 +179,12 @@
<p class="error">{{ error_msg }}</p>
<input type="submit" value="{% trans "Upload" %}" class="submit" />
</form>
<div id="upload-progress" class="hide">
<p>{% trans "Uploaded:" %} <span id="upload-progress-text">{% trans "Fetching ..." %}</span></p>
<div id="task-progress-bar" class="hide"></div>
<button id="upload-cancel">{% trans "Cancel" %}</button>
<div id="upload-progress-con" class="upload-progress-con hide">
<p>{% trans "Uploaded:" %} <span class="upload-progress-text">{% trans "Fetching ..." %}</span></p>
<div class="upload-progress-bar"></div>
<button class="upload-cancel">{% trans "Cancel" %}</button>
<iframe class="hide"><!--for chrome--></iframe>
</div>
<iframe id="request-progress" class="hide"><!--for chrome--></iframe>
{% endif %}
</div>
@@ -192,22 +192,22 @@
<div id="update-file-dialog" class="hide">
<h3>Update File</h3>
{% if no_quota %}
<p class="error">{% trans "The owner of this library has ran out of space. Update failed." %}</p>
<p class="error">{% trans "The owner of this library has ran out of space." %}</p>
{% else %}
<form id="update-file-form" enctype="multipart/form-data" method="post" action="{{ update_url }}?head={{ head_id }}">
<input type="hidden" name="target_file" />
<input type="file" name="file" id="id_update_file" />
<input type="file" name="file" id="file-update-input" />
<p>({% trans "Smaller than" %} {{ max_upload_file_size|filesizeformat }})</p>
<p class="error">{{ error_msg }}</p>
<input type="submit" value="{% trans "Update" %}" class="submit" />
</form>
<div id="upload-progress" class="hide">
<p>{% trans "Uploaded:" %} <span id="upload-progress-text">{% trans "Fetching..." %}</span></p>
<div id="task-progress-bar" class="hide"></div>
<button id="upload-cancel">{% trans "Cancel" %}</button>
<div id="update-progress-con" class="upload-progress-con hide">
<p>{% trans "Uploaded:" %} <span class="upload-progress-text">{% trans "Fetching..." %}</span></p>
<div class="upload-progress-bar"></div>
<button class="upload-cancel">{% trans "Cancel" %}</button>
<iframe class="hide"><!--for chrome--></iframe>
</div>
<iframe id="request-progress" class="hide"><!--for chrome--></iframe>
{% endif %}
</div>
@@ -616,8 +616,8 @@ $('#upload-file').click(function () {
}
}); // init MultiFile
$('#simplemodal-container').css({'height':'auto', 'width':'auto'});
$('#upload-file-form .files-add').css({'width':$('#upload-file-form .files-add').width()});
$('#upload-file-form .files-add input').css({'right':$('#upload-add-tip').width()});
$('#upload-file-form .files-add').css({'width':$('#upload-file-form .files-add').width() + 1}); // '+ 1' for ie
$('#file-upload-input').css({'right':$('#upload-add-tip').width()});
});
$('a.update-file').click(function() {

View File

@@ -9,38 +9,38 @@ function gen_uuid() {
return uuid;
}
function submit_and_real_time_show (dialog_id) {
var form = $(dialog_id + ' form')[0],
uuid = gen_uuid(); // id for this upload so we can fetch progress info.
$(dialog_id + ' #upload-progress').removeClass('hide');
function submitAndShowProgress(form, upload_progress_con) {
var uuid = gen_uuid(); // id for this upload so we can fetch progress info.
upload_progress_con.removeClass('hide');
// Append X-Progress-ID uuid form action
form.action += (form.action.indexOf('?') == -1 ? '?' : '&') + 'X-Progress-ID=' + uuid;
var form_action = form.attr('action');
form.attr('action', form_action += (form_action.indexOf('?') == -1 ? '?' : '&') + 'X-Progress-ID=' + uuid);
form.submit();
$(dialog_id + ' form .submit').addClass('hide');
form.find('.submit').addClass('hide');
// Update progress bar: not work in chrome.
function update_progress_info() {
// Update progress: not work in chrome.
function updateProgress() {
$.ajax({
url: '{{ httpserver_root }}/upload_progress/?X-Progress-ID=' + uuid + '&callback=?',
dataType: 'jsonp',
cache: false,
success: function(data) {
if (data) {
$(dialog_id + ' #upload-progress-text').html(filesizeformat(data.uploaded, 2) + ' / ' + filesizeformat(data.length, 2));
$(dialog_id + ' #task-progress-bar').removeClass('hide').progressbar({
upload_progress_con.find('.upload-progress-text').html(filesizeformat(data.uploaded, 2) + ' / ' + filesizeformat(data.length, 2));
upload_progress_con.children('.upload-progress-bar').progressbar({
value: data.uploaded / data.length * 100
});
}
}
});
setTimeout(update_progress_info, 1000);
setTimeout(updateProgress, 1000);
};
update_progress_info();
updateProgress();
// Update progress bar: for chrome
if ($.browser.safari) {
$(dialog_id + ' iframe').attr('src', '{{ SITE_ROOT }}file_upload_progress_page/?uuid=' + uuid + '&dlg_id=' + dialog_id.substr(1));
upload_progress_con.children('iframe').attr('src', '{{ SITE_ROOT }}file_upload_progress_page/?uuid=' + uuid + '&upload_progress_con_id=' + upload_progress_con.attr('id'));
}
return false;
@@ -52,46 +52,37 @@ $('#upload-file-form .submit').click(function () {
return false;
}
if (this.files) {
var total = 0;
var total_size = 0;
$.each($('#upload-file-form input[type=file]'), function() {
if($(this).val()) {
total += this.files[0].size;
if(this.files && this.files.length > 0) {
total_size += this.files[0].size;
}
});
if (total > {{ max_upload_file_size }}) {
if (total_size > {{ max_upload_file_size }}) {
$('#upload-file-form .error').html('{% trans "File size surpasses the limit." %}').removeClass('hide');
return false;
}
}
$('#upload-file-form .error').addClass('hide');
$.fn.MultiFile.disableEmpty(); // disable dummy element before submiting the form
submit_and_real_time_show('#upload-file-dialog');
submitAndShowProgress($('#upload-file-form'), $('#upload-progress-con'))
return false;
});
$('#upload-file-dialog #upload-cancel').click(function() {
location.reload(true);
});
$('#update-file-form .submit').click(function () {
if (!$.trim($('#update-file-form input[type=file]').val())) {
if (!$.trim($('#file-update-input').val())) {
$('#update-file-form .error').html('{% trans "Please choose a file at first." %}').removeClass('hide');
return false;
}
$('#update-file-form .error').addClass('hide');
$.fn.MultiFile.disableEmpty(); // disable dummy element before submiting the form
submit_and_real_time_show('#update-file-dialog');
submitAndShowProgress($('#update-file-form'), $('#update-progress-con'))
return false;
});
$('#update-file-dialog #upload-cancel').click(function() {
location.reload(true);
$('#upload-progress-con .upload-cancel, #update-progress-con .unload-cancel').click(function() {
location.reload();
});
</script>
{% endif %}

View File

@@ -2030,11 +2030,11 @@ def file_upload_progress_page(request):
'''
uuid = request.GET.get('uuid', '')
httpserver_root = get_httpserver_root()
dialog_id = request.GET.get('dlg_id', '')
upload_progress_con_id = request.GET.get('upload_progress_con_id', '')
return render_to_response('file_upload_progress_page.html', {
'uuid': uuid,
'httpserver_root': httpserver_root,
'dialog_id': '#' + dialog_id,
'upload_progress_con_id': upload_progress_con_id,
}, context_instance=RequestContext(request))
@login_required