jQuery Ajax Progress - как не наследовать процент выполнения для разных запросов ajax?

Привет, я на самом деле использую этот плагин 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.


чтобы лучше объяснить, я хотел бы запустить многие из этих запросов, но > сохранить процент выполнения (var pct), уникальный для каждого запроса


person bombastic    schedule 23.07.2013    source источник
comment
Проблема в том, что which имеет одинаковое значение или оба набора вызовов прогресса ajax. Если вы получаете which информацию о закрытии, уникальном для каждого вызова, это должно работать. У вас будет та же проблема с распечаткой file_name в конце и обновлением прогресса в конце.   -  person Lee Meador    schedule 24.07.2013
comment
@LeeMeador _which меняет свое значение при каждом change(), то есть при каждом запущенном запросе, но я не могу сделать var _what.pct !?   -  person bombastic    schedule 24.07.2013
comment
@LeeMeador нет, чувак, _file_name всегда новое при каждом запросе, лучше проверь, я уже тестировал, и это работает, просто проблема в том, чтобы сделать pct не общим: P   -  person bombastic    schedule 24.07.2013
comment
@LeeMeador извините за мою ошибку, я вставил весь js, теперь все ясно, я думаю ..   -  person bombastic    schedule 24.07.2013


Ответы (1)


Это сохранит значение _which для повторного использования при вызове обработчиков:

function(_which, file_name) {
    $.ajax(... same as the code you have ...
}(_which, file_name);

Это создает закрытие, которое содержит значения двух переменных, которые вы используете в функциях обратного вызова (обработчике), которые вы передаете вызову ajax. Делая это, вы по-прежнему делитесь функциями (например, прогрессом), но вы не делитесь значениями _which и file_name, которые используются в этих функциях.

Вы бы, конечно, добавили 1-ю и 3-ю строки вокруг всего вашего call toe $.ajax

Если вы добавите больше переменных, которые установлены снаружи, но используются внутри этих функций-обработчиков, вам также нужно будет добавить их в замыкание.

Есть и другие способы сделать это, но это минимальные изменения в вашем коде.

Например, это тоже сработает:

var doAjax = function() {
    var localWhich = _which;
    var localFileName = file_name;
    $.ajax(... all the same code but use localWhich where you have _which now
         ... and localFileName where you have file_name now
}
doAjax();
person Lee Meador    schedule 23.07.2013
comment
поэтому мне нужно поместить ajax в метод с параметрами? это не разделит прогресс: заявление? Я немного новичок, если вы можете добавить небольшое описание того, почему это работает, это здорово! ;) @Ли Миадор - person bombastic; 24.07.2013