如何设置video文件的预览，从输入类型=’文件’中选择

在我的一个模块中，我需要从输入[type =’file’]浏览video，之后我需要在开始上传之前显示所选video。

我正在使用基本的HTML标签来显示。 但它不起作用。

这是代码：

$(document).on("change",".file_multi_video",function(evt){ var this_ = $(this).parent(); var dataid = $(this).attr('data-id'); var files = !!this.files ? this.files : []; if (!files.length || !window.FileReader) return; if (/^video/.test( files[0].type)){ // only video file var reader = new FileReader(); // instance of the FileReader reader.readAsDataURL(files[0]); // read the local file reader.onloadend = function(){ // set video data as background of div var video = document.getElementById('video_here'); video.src = this.result; } } }); 

Answer 1

@FabianQuiroga是正确的，在这种情况下你应该更好地使用createObjectURL不是FileReader ，但你的问题更多地与你设置元素的src这一事实有关，所以你需要调用videoElement.load() 。

 $(document).on("change", ".file_multi_video", function(evt) { var $source = $('#video_here'); $source[0].src = URL.createObjectURL(this.files[0]); $source.parent()[0].load(); }); 

Answer 2

不要忘记它使用jquery库

使用Javascript

 $ ("#video_p").change(function () { var fileInput = document.getElementById('video_p'); var fileUrl = window.URL.createObjectURL(fileInput.files[0]); $(".video").attr("src", fileUrl); }); 

HTML

 < video controls class="video" > < /video >