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

}

在腳註確保你把兼容的視頻。並非所有視頻文件都會顯示。