如何在网站上预览用户要上传的视频文件（PHP、FiileAPI JS）

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

我已经使用 FileAPI JS 使用图像文件进行预览。我想对视频文件的 FileAPI JS 做同样的事情。

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

谢谢并感谢您的回答:)

您可以使用文件阅读器 http://caniuse.com/#feat=filereader or 创建对象URL http://caniuse.com/#feat=bloburls。它们都可以完成工作，但 FileReader 在浏览器中的支持稍微广泛一些。

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

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

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

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

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

Mozilla 有一个更详细的文章 https://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/并附有有关如何在获得文件后上传的说明。

IE10 两者都支持，但 IE9 两者都不支持，因此您必须退回到不带预览的常规表单上传。