javascript - cum să afișezi miniatura sau previzualizarea pentru fișierul încărcat curent

Am dificultăți în afișarea previzualizării video/imagine care este încărcată

Practically, vreau să spun că codul de mai jos nu rulează pentru a obține previzualizarea video/imagine

Este Jsfiddle-ul meu

.bind('fileuploadprocessalways', function(e, data)
  {
      var canvas = data.files[0].preview;
      var dataURL = canvas.toDataURL();
      $("#some-image").css("background-image", 'url(' + dataURL +')');

  })

Întrebare: vă rog să mă ajutați să am o previzualizare a video/imagine încărcată

aici este codul meu complet

html:

<input id="fileupload" type="file" name="files[]" multiple>
<div class="progress">
    <div class="meter" style="width: 0%;"></div>
</div>
<div class="data"></div>
<div id="some-image"></div>

javascript:

$(function () {
    $('#fileupload').fileupload({
        url: '/echo/json/',
        maxChunkSize: 1048576,
        maxRetries: 3,
        dataType: 'json',
        multipart: false,
        progressall: function (e, data) {
          //progress
        },
        add: function (e, data) {
            data.context = $('<p/>').text('Uploading...').appendTo('.data');
            data.submit();
        },
        done: function (e, data) {
            data.context.text('Upload finished.');
        },
        fail: function (e, data) {
            data.context.text('Upload failed.');

        }
    }).bind('fileuploadprocessalways', function(e, data)
     {
         var canvas = data.files[0].preview;
         var dataURL = canvas.toDataURL();
         $("#some-image").css("background-image", 'url(' + dataURL +')');

      })
});

Răspuns #1

Iată un exemplu despre cum să capturezi miniatura unui videoclip folosind jQuery. Ideea este să ai un fileupload, apoi să încarci videoclipul folosind elementul video, să setezi currentTime al videoclipului la un moment aleatoriu pentru a obține miniatura și să desenezi videoclipul folosind canvas.

$(function() {
    var video = $("video");
    var thumbnail = $("canvas");
    var input = $("input[type=file]");
    var ctx = thumbnail.get(0).getContext("2d");
    var duration = 0;
    var img = $("img");

    input.on("change", function(e) {
        var file = e.target.files[0];
        // Validate video file type
        if (["video/mp4"].indexOf(file.type) === -1) {
            alert("Only 'MP4' video format allowed.");
            return;
        }
        // Set video source
        video.find("source").attr("src", URL.createObjectURL(file));
        // Load the video
        video.get(0).load();
        // Load metadata of the video to get video duration and dimensions
        video.on("loadedmetadata", function(e) {
            duration = video.get(0).duration;
            // Set canvas dimensions same as video dimensions
            thumbnail[0].width = video[0].videoWidth;
            thumbnail[0].height = video[0].videoHeight;
            // Set video current time to get some random image
            video[0].currentTime = Math.ceil(duration / 2);
            // Draw the base-64 encoded image data when the time updates
            video.one("timeupdate", function() {
                ctx.drawImage(video[0], 0, 0, video[0].videoWidth, video[0].videoHeight);
                img.attr("src", thumbnail[0].toDataURL());
            });
        });
    });
});

video, canvas {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" accept="video/mp4" />
<video controls>
    <source type="video/mp4">
</video>
<canvas></canvas>
<br/>
<img/>

Pentru a determina dacă tipul de media specificat poate fi redat, poți folosi acest cod:

var obj = document.createElement("video");
console.info("video/avi: ", obj.canPlayType("video/avi")  || "no");
console.info("video/mp4: ", obj.canPlayType("video/mp4"));

Valorile posibile sunt:

• "probabil": Tipul de media specificat pare a fi redabil.
• "maybe": Nu se poate spune dacă tipul de media poate fi redat fără a-l reda efectiv.
• "": Tipul de media specificat nu poate fi redat definitiv.

Răspunsul #2

Cred ceva de genul acesta.

<input id="fileupload" type="file" name="files[]" multiple>
<div class="progress">
    <div class="meter" style="width: 0%;"></div>
</div>
<div class="data"></div>
<div id="some-image">
    <img id="uAvata" alt="" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    $("#fileupload").change(function(evt) {
        var fileUpload = $(this).get(0).files;
        readURL(this, "#uAvata");
    });
    //Preview image
    function readURL(inputFile, imgId) {
        if (inputFile.files && inputFile.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                $(imgId).attr('src', e.target.result);
            }
            reader.readAsDataURL(inputFile.files[0]);
        }
    }
    // Preview video will read video like: @xxxmatko
</script>