Js通过预览功能拖放图像/视频上传

Question

我的目标是为视频和图像设置拖放上传框，以将文件填充到框的确切形状和大小。

您可以在这里看到的片段：http://jsfiddle.net/ELcf6/4/

想不通，如何为视频上传相同的功能添加到同一个盒子。将不胜感激任何帮助。

这里的片段：

var imageLoader = document.getElementById('filePhoto'); 
 
    imageLoader.addEventListener('change', handleImage, false); 
 

 
function handleImage(e) { 
 
    var reader = new FileReader(); 
 
    reader.onload = function (event) { 
 
     
 
     $('.uploader img').attr('src',event.target.result); 
 
    } 
 
    reader.readAsDataURL(e.target.files[0]); 
 
}

.uploader {position:relative; overflow:hidden; width:300px; height:350px; background:#f3f3f3; border:2px dashed #e8e8e8;} 
 

 
#filePhoto{ 
 
    position:absolute; 
 
    width:300px; 
 
    height:400px; 
 
    top:-50px; 
 
    left:0; 
 
    z-index:2; 
 
    opacity:0; 
 
    cursor:pointer; 
 
} 
 

 
.uploader img{ 
 
    position:absolute; 
 
    width:302px; 
 
    height:352px; 
 
    top:-1px; 
 
    left:-1px; 
 
    z-index:1; 
 
    border:none; 
 
}

<div class="uploader" onclick="$('#filePhoto').click()"> 
 
    click here or drag here your images for preview and set userprofile_picture data 
 
    <img src=""/> 
 
    <input type="file" name="userprofile_picture" id="filePhoto" /> 
 
</div>

Answer 1

与其说是修复，作为一个建议，但谁的人面前，使客户端上传，我发现用http://www.dropzonejs.com/容易得多。

Answer 2

您正在搜索的关键字是：createObjectURL。

https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL

然而，浏览器必须支持它。

Answer 3

好，所以你试图从视频文件中提取图像数据，这不一定工作。你真正需要的是一个隐藏的视频领域和HTML5画布。当你放弃视频文件时，你会填充视频源，然后在你检测到任何图像数据时通过画布播放它，你将能够以相同的方式显示它图片。关于如何通过StackOverflow上的画布播放视频以及实际上难以放在一起的答案有很多答案。

Answer 4

我已经更新了你的JSFiddle，以便做你想要的东西Jsfiddle 我测试它只在它的工作原理。根据您的需求更新它。

function handleImage(e) { 
    var filetype = imageLoader.files[0].type; 
var reader = new FileReader(); 
reader.onload = function (event) { 
    if(filetype.indexOf("image") > -1){ 
    $('.uploader img').attr('src',event.target.result); 
    }else if(filetype.indexOf("video") > -1){ 

    $('.uploader video')[0].src =reader.result; 
    } 

} 
reader.readAsDataURL(e.target.files[0]); 

}

在脚注确保你把兼容的视频。并非所有视频文件都会显示。