如何预览用户想要在网站上传的视频文件(PHP,FiileAPI JS)

Question

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

我已经使用FileAPI JS预览图像文件了.我想用FileAPI JS做视频文件.

(所以,它必须在我的客户端工作)

谢谢和答案很感激:)

Answer 1

您可以使用FileReader或createObjectURL.他们都将完成工作,但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

Mozilla有一篇更详细的文章,其中包含有关如何获取文件后如何上传的说明.

IE10支持两者,但IE9既不支持,所以你必须回退到没有预览的常规表单上传.