如何预览用户想上传的视频文件（PHP，FiileAPI JS） [英] how to Preview the video file that user wants to upload on the website (PHP, FiileAPI JS)

问题描述

我的意思是，当用户从他们的系统中选择视频文件时，让网页已经显示他们要上传的文件。

已经使用图像文件预览使用FileAPI JS。同样我想用FileAPI JS来处理视频文件。

（所以，它必须在我的客户端工作）

谢谢&答案赞赏：）

解决方案

您可以使用 FileReader 或 createObjectURL 。他们都会完成这项工作，但是FileReader在浏览器中有更广泛的支持。

createObjectURL 将同步运行并返回一个Blob URL，一个引用内存中文件的短字符串。你可以立即释放它。

FileReader 将会异步运行，需要回调，提供一个数据URI，一个更长的字符串代表整个文件。这可以是非常大的，并将从JavaScript垃圾回收内存中释放。

这是一个例子，首先尝试 createObjectURL 并回落到 FileReader 。 （请提供您自己的错误检查等）

pre $ var $ video $ document.getElementById（'video'），
input = document.getElementById（'input'）;

input.addEventListener（'change'，function（evt）{
var reader = new window.FileReader（），
file = evt.target.files [0]，
url;

reader = window.URL || window.webKitURL;

if（reader&& reader.createObjectURL）{
url = reader.createObjectURL（file）;
video.src = url;
reader.revokeObjectURL（url）; //释放内存
return;
}

if（！window.FileReader）{
console.log（'Sorry，not so much'）;
return;
}

reader = new window.FileReader（）;
reader.onload = function（evt）{
video.src = evt.target.result;
};
reader.readAsDataURL（file）;
}，false）;

工作示例： http://jsbin.com/isodes/1/edit

$ b Mozilla有一个更详细的文章，上面有关于如何上传的说明得到你的文件。
$ b

IE10同时支持，但IE9不支持，所以你必须回到常规的形式上传没有预览。

I mean, when a user chooses the video file from their system, have the web-page already show them the files they want to upload.

I'm already using image file to preview using FileAPI JS. The same I want to do with FileAPI JS for video file.

(So, It must be work within my client side)

Thanks & answers are appreciated :)

解决方案

You can either use FileReader or createObjectURL. They'll both get the job done, but FileReader has slightly broader support in browsers.

createObjectURL will run synchronously and return a Blob URL, a short string referencing the file in memory. and you can free it up immediately after you're done using it.

FileReader will run asynchronously, requiring a callback, providing a Data URI, a much longer string representing the whole file. This can be very big and will be freed from memory in Javascript garbage collection.

Here's an example that first tries createObjectURL and falls back to FileReader. (Please provide your own error checking, etc.)

var video = document.getElementById('video'),
    input = document.getElementById('input');

input.addEventListener('change', function (evt) {
    var reader = new window.FileReader(),
        file = evt.target.files[0],
        url;

        reader = window.URL || window.webKitURL;

    if (reader && reader.createObjectURL) {
        url = reader.createObjectURL(file);
        video.src = url;
        reader.revokeObjectURL(url);  //free up memory
        return;
    }

    if (!window.FileReader) {
        console.log('Sorry, not so much');
        return;
    }

    reader = new window.FileReader();
    reader.onload = function(evt) {
       video.src = evt.target.result;
    };
    reader.readAsDataURL(file);
}, false);

Working example here: http://jsbin.com/isodes/1/edit

Mozilla has a more detailed article with instructions on how to upload once you've got your file.

IE10 supports both, but IE9 supports neither, so you'll have to fall back to a regular form upload without a preview.

这篇关于如何预览用户想上传的视频文件（PHP，FiileAPI JS）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！