скрипт для загрузки файла на сервер.

function img() {
    $('#avatar_reg').change(function (e) {

        e.preventDefault();
        var progressBar = $('#progressbar_upl');
        var progressDiv = $('#progress_div');
        progressDiv.fadeIn(100);
        var $that = $('#reg_form'),
                formData = new FormData($that.get(0));

        $.ajax({

            url: '/add_img',
            type: 'POST',
            contentType: false,
            processData: false,
            data: formData,
            dataType: 'json',
            xhr: function () {
                var xhr = $.ajaxSettings.xhr(); // получаем объект XMLHttpRequest
                xhr.upload.addEventListener('progress', function (evt) { // добавляем обработчик события progress (onprogress)
                    if (evt.lengthComputable) { // если известно количество байт
                        // высчитываем процент загруженного
                        var percentComplete = Math.ceil(evt.loaded / evt.total * 100);
                        // устанавливаем значение в атрибут value тега <progress>
                        // и это же значение альтернативным текстом для браузеров, не поддерживающих <progress>
                       
                        progressBar.width(percentComplete + '%');
                        if (percentComplete == 100) {
                            progressDiv.fadeOut(3000);
                            
//обновляю имеющиеся картинки в диве
upd_img();
                            
                            //  $('#avatar_reg').attr('type', 'hidden');

                        }
                    }
                }, false);
                return xhr;
            },
            success: function (json) {
                if (json) {

                

                    

                   );

                }

            }
        });
    });

}

//запрашиваю у сервера порцию картинок и получаю актуальный список

function upd_img() {
    $.ajax({
        url: '/upd_img_form',
        type: 'POST',
        dataType: 'json',
        success: function (json) {
            if (json) {

                //alert(json[0]['src']);
                var div = '';
                for (var i = 0; i < json.length; i++) {
                    div  += '<div style="float:left;margin: 5px;"><a href="#"><img id="img_' + json[i]['id_img'] + '" src="images/thumbs/' + json[i]['src'] + '" alt="' + json[i]['text1_img'] + '" data-attr-text="' + json[i]['text2_img'] + '" onclick="red_img_form(' + json[i]['id_img'] + ', \'' + json[i]['src'] + '\')"/></a></div>';
                }

                document.getElementById('div_upd_img').innerHTML = '<div style="margin: 20px 0px 0px 24px; display:block">' + div  + '</div>';
                //$('#div_upd_img').add(data);



            }
        }
    });

}

скрипты работаю. Добавление картинки добавляет на сервер + пишет в базу(естественно это делают php файлы). Скрипт обновления поля обновляет. Вот только бываю случаи когда подряд добавляешь несколько картинок, скрипт добавляет картинку, а обновление не происходит, при следующем добавлении в обновлённом диве появляется предыдущая картинка. Хотя в базе уже все картинки прописались и на сервере появились. Это может случиться на второй или третьей картинке.

_____________
Прошу критиковать, если что-то не так.