Multiple videos upload repeatedly - JavaScript / jQuery-CodePudding

I created a upload for multiples videos, and I'm showing in a thumbnail. It's working ok until here, the problem is, I select for example 3 videos differently, but when loading my preview for all videos are the same.

HTML:

<div id="thumbnail"></div>
<input type="file" id="upload-file" accept="video/*" multiple/>

JavaScript:

$('div').on('click', '.closeDiv', function () {
    $(this).prev().remove();
    $(this).remove();
    $('#upload-file').val("");
});
var fileDiv = document.getElementById("upload");
var fileInput = document.getElementById("upload-file");

fileInput.addEventListener("change", function (e) {

    var filesVAR = this.files;

    showThumbnail(filesVAR);

}, false);


function showThumbnail(files) {

    debugger

    for (var i = 0; i < files.length; i  ) {

        var file = files[i];

        var thumbnail = document.getElementById("thumbnail");
        var pDiv = document.createElement("div");
        var video = document.createElement("video");
        var div = document.createElement("div");


        pDiv.setAttribute('class', 'pDiv');
        thumbnail.appendChild(pDiv);


        video.setAttribute('class', 'imgKLIK5');
        pDiv.appendChild(video)

        div.innerHTML = "Excluir";
        div.setAttribute('class', 'closeDiv');
        pDiv.appendChild(div)

        video.file = file;
        var reader = new FileReader()
        reader.onload = (function (aImg) {
            return function (e) {
                var blobURL = URL.createObjectURL(file);
                aImg.src = blobURL;
                aImg.setAttribute("controls", "")
            };
        }(video))
        var ret = reader.readAsDataURL(file);
        var canvas = document.createElement("canvas");
        ctx = canvas.getContext("2d");
        video.onload = function () {
            ctx.drawImage(video, 100, 100);
        }
    }

}

Check the image results (I selected 3 videos):

But the results:

CodePudding user response：

just need to change the vars to lets and it works fine

$('div').on('click', '.closeDiv', function() {
  $(this).prev().remove();
  $(this).remove();
  $('#upload-file').val("");
});
let fileDiv = document.getElementById("upload");
let fileInput = document.getElementById("upload-file");

fileInput.addEventListener("change", function(e) {

  let filesVAR = this.files;

  showThumbnail(filesVAR);

}, false);


function showThumbnail(files) {

  debugger

  for (let i = 0; i < files.length; i  ) {

    let file = files[i];

    let thumbnail = document.getElementById("thumbnail");
    let pDiv = document.createElement("div");
    let video = document.createElement("video");
    let div = document.createElement("div");


    pDiv.setAttribute('class', 'pDiv');
    thumbnail.appendChild(pDiv);


    video.setAttribute('class', 'imgKLIK5');
    pDiv.appendChild(video)

    div.innerHTML = "Excluir";
    div.setAttribute('class', 'closeDiv');
    pDiv.appendChild(div)

    video.file = file;
    let reader = new FileReader()
    reader.onload = (function(aImg) {
      return function(e) {
        let blobURL = URL.createObjectURL(file);
        aImg.src = blobURL;
        aImg.setAttribute("controls", "")
      };
    }(video))
    let ret = reader.readAsDataURL(file);
    let canvas = document.createElement("canvas");
    ctx = canvas.getContext("2d");
    video.onload = function() {
      ctx.drawImage(video, 100, 100);
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="thumbnail"></div>
<input type="file" id="upload-file" accept="video/*" multiple/>

I hope this helps