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

Posted 2023-03-21

【中文标题】如何在网站上预览用户想要上传的视频文件（PHP、FiileAPI JS）

【英文标题】：how to Preview the video file that user wants to upload on the website (PHP, FiileAPI JS)

【发布时间】：2013-01-09 03:07:18

【问题描述】：

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

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

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

感谢和回答：)

【参考方案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 有一个more detailed article，其中包含有关如何在获得文件后上传的说明。

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

【讨论】：

FileReader 方法是否适用于 ios 有什么意义吗？我让它在 OSX 的 Safari 中运行，但是当我在 iOS 6 上尝试相同的代码时，视频只是作为一个黑匣子坐在那里。