Привет, я на самом деле использую этот плагин https://github.com/englercj/jquery-ajax-progress/
Он просто добавляет статус progress: к ajax-запросу.
Он отлично работает, и мой код выглядит так:
var _min_width = 470;
var _min_height = 330;
var _which;
var _fyle_type;
var _file_name;
var allowed_types = new Array('image/png','image/jpg','image/jpeg');
if (typeof(FileReader) === 'function'){
$('input[type="file"]').on('change', function(e) {
_file_name = $(this).val();
var file = e.target.files[0];
if (!in_array(file.type,allowed_types) || file.length === 0){
notify("You must select a valid image file!",false,false);
return;
}
if(file.size > 3145728 /*3MB*/){
notify("<?php echo lang('each-photo-1MB'); ?>",false,false);
return;
}
notify_destroy();
var reader = new FileReader();
reader.onload = fileOnload;
reader.readAsDataURL(file);
});
function fileOnload(e) {
var img = document.createElement('img');
img.src = e.target.result;
img.addEventListener('load', function() {
if(img.width < _min_width || img.height < _min_height ){
notify("<?php echo lang('each-photo-1MB'); ?>",false,false);
return;
}
//remove not-needed base64 data:pfff
var clear_string = e.target.result.replace('data:image/jpeg;base64,','').replace('data:image/png;base64,','');
var _data;
if(_which == 'photo_1'){
_data = {photo_1:clear_string};
}if(_which == 'photo_2'){
_data = {photo_2:clear_string};
}if(_which == 'photo_3'){
_data = {photo_3:clear_string};
}if(_which == 'photo_4'){
_data = {photo_4:clear_string};
}
$.ajax({
type:'post',
dataType:'text',
data:_data,
url:_config_base_url+'/upload/upload_photos',
beforeSend:function(){
$('.'+_which+'_holder').fadeOut(0);
$('.'+_which+'_progress').fadeIn(0);
$('.'+_which+'_progress').addClass('progress-striped');
},
progress:function(e){
//make sure we can compute the length
if(e.lengthComputable) {
//calculate the percentage loaded
var pct = (e.loaded / e.total) * 100;
$('.'+_which+'_progress .bar').css({'width':pct+'%'});
$('.'+_which+'_progress .progress-opt span').text(pct.toFixed(0));
//console.log(pct);
}else {
console.warn('Content Length not reported!');
}
},
success:function(){
alert(_file_name+' uploaded ok');
},
complete:function(){
$('.'+_which+'_progress .progress-opt span').text('100');
$('.'+_which+'_holder p').text(_file_name);
$('.'+_which+'_progress .bar').css({'width':'100%'});
$('.'+_which+'_progress').delay(300).removeClass('progress-striped').fadeOut(0,function(){
$('.'+_which+'_holder').show(0);
$('.'+_which+'_progress .bar').css({'width':'0'});
});
}
});
});
}
}
теперь проблема в том, что когда я устанавливаю text(pct.toFixed(0))
в статусе progress:
ajax, мне нужно сделать pct
«живым», я имею в виду, что этот код помещает ход выполнения запроса в процентах, чтобы вы могли видеть, сколько в процентах требуется для завершения запроса.
Проблема в том, что если я запускаю 2 из этих запросов, то pct будет общим для обоих запросов, поэтому, если запрос 1 находится на 40%, прогресс (pct), тогда запрос 2 унаследует тот же процент выполнения (процент = 40%) от запроса 1.
which
имеет одинаковое значение или оба набора вызовов прогресса ajax. Если вы получаетеwhich
информацию о закрытии, уникальном для каждого вызова, это должно работать. У вас будет та же проблема с распечаткойfile_name
в конце и обновлением прогресса в конце. - person Lee Meador   schedule 24.07.2013_which
меняет свое значение при каждомchange()
, то есть при каждом запущенном запросе, но я не могу сделать var _what.pct !? - person bombastic   schedule 24.07.2013