多個視頻重復上傳-JavaScript/jQuery

我為多個視頻創建了上傳，并以縮略圖形式顯示。到這里為止一切正常，問題是，我選擇了例如 3 個不同的視頻，但是在加載所有視頻的預覽時都是相同的。

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);
        }
    }

}

檢查影像結果（我選擇了 3 個視頻）：

但結果：

uj5u.com熱心網友回復：

只需要將 vars 更改為 let 就可以了

$('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/>

我希望這有幫助

標籤：javascript jQuery

上一篇：HTML中的表格資料沒有很好地分離

下一篇：如何在其類名中選擇帶有冒號的元素？[復制]