Не получается загрузить файлы

Question

я хотел бы загрузить файлы на сервер через ajax, но когда загружается один файл, а следом тут же второй, то в последнем отображается прогресс файла который перед ним. Как исправить?

<style type="text/css">
.upload-files__container{margin-bottom:14px;}
.upload-file__progres{min-width:0;height:21px;transition:all 0.9s ease;background-color: orange;text-align:center;}
.upload-file__block{width:240px;height:21px;background-color:#DDD;width: 100%;margin-bottom:14px;}
</style>
<div id="upload-files__container">
    
</div>

    <script type="text/javascript">

var number=0;

function upload(file) {
  number  = ++number;
  var ajax = new XMLHttpRequest();
  var div = document.createElement('div');

  div.className='upload-file__wrap';
  div.innerHTML = '<div id="upload-file__block_'+number+'" class="upload-file__block"><div id="upload-file__progress_'+number+'" class="upload-file__progres"></div></div>';
  document.getElementById('upload-files__container').appendChild(div);
  ajax.upload.onprogress = function(event) {
    var test = ((event.loaded / event.total) *100).toFixed();
    document.getElementById('upload-file__progress_'+number).style.width = test + '%';
    document.getElementById('upload-file__progress_'+number).innerHTML = test + '%';
    if(test == 100) {
      document.getElementById('upload-file__progress_'+number).innerHTML = '';
    }
  }
  var formData = new FormData();
  formData.append("userfile", file);
    
  ajax.open("POST", "admin.php?act=upload_photo", true);
  ajax.send(formData);
}
    </script>

    <input type="file" name="" onchange="upload(this.files[0]);">


  </div>

Answer 1

Всё очень просто объясняется:

//var number = 0; - переменная, к которой обращаются для отображения прогресса
//но она меняет своё значение даже в тех функциях, что были вызваны до её изменения
let number = 0;

function upload(file) {
    //number  = ++number; не знаю, зачем так сложно, перенёс в конец
    let ajax = new XMLHttpRequest();
    let div = document.createElement('div');

    div.className = 'upload-file__wrap';
    div.innerHTML = '<div id="upload-file__block_'+number+'" class="upload-file__block"><div id="upload-file__progress_'+number+'" class="upload-file__progres"></div></div>';
    document.getElementById('upload-files__container').appendChild(div);
    ajax.upload.onprogress = function(event) {
        let test = ((event.loaded / event.total) *100).toFixed();

        //Если бы переменная number была var, то во всех функциях она приняла бы своё последнее значение
        document.getElementById('upload-file__progress_'+number).style.width = test + '%';
        document.getElementById('upload-file__progress_'+number).innerHTML = test + '%';
        if (test == 100) {
            document.getElementById('upload-file__progress_'+number).innerHTML = '';
        }
    };
    let formData = new FormData();
    formData.append("userfile", file);

    ajax.open("POST", "admin.php?act=upload_photo", true);
    ajax.send(formData);
    number++;
}

Во всех не отмеченных мною местах исправил var на let просто так. Подробнее здесь

let иногда делает код чище при использовании вложенных функций.

БЛОГ НА HUSL

Не получается загрузить файлы

Ответы (1 шт):