如何显示thumnail或预览当前文件上传 [英] how to display thumnail or preview for current file upload

问题描述

我无法显示视频/图片的预览 已加载

基本上我的意思是说下面的代码不是解雇来获得视频/图像预览

Basically I mean to say below code is not firing to get video/image preview

这是我的 Jsfiddle

It is my Jsfiddle

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

  })

问题：请帮忙我要预览视频/图像正在上传

Question: please help me to have preview of video/image being uploaded

这是我的完整代码

here is my complete code

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 +')');

      })
});

推荐答案

以下是如何使用jQuery捕获视频缩略图的示例。想法是使用fileupload，然后使用 video 元素加载视频，将视频currentTime设置为一些随机时间以获取缩略图并使用绘制视频canvas 。

Here is a sample how to capture video thumbnail using jQuery. The idea is to have fileupload, then load the video using video element set the video currentTime to some random time to get the thumbnail and draw the video using 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/>

要确定是否可以播放指定的媒体类型，您可以使用以下代码：

To determines whether the specified media type can be played back you can use this code:

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

可能的值是：

• 可能：指定的媒体类型似乎可以播放。


• maybe：无法判断媒体类型是否可播放而不播放。


• ：指定的媒体类型绝对不能玩。

• "probably": The specified media type appears to be playable.
• "maybe": Cannot tell if the media type is playable without playing it.
• "": The specified media type definitely cannot be played.

这篇关于如何显示thumnail或预览当前文件上传的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！