如何显示thumnail或预览当前文件上传

我无法显示正在加载的video/image的预览

基本上我的意思是说下面的代码没有触发来获取video/image预览

这是我的Jsfiddle

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

问题 ：请帮我预览正在上传的video/image

这是我的完整代码

HTML：

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 = $('
').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 +')'); }) }); 

Answer 1

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

 $(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; } 

Answer 2

我觉得有些事情是这样的。