プレビュー付きの画像/動画をドラッグ＆ドロップでアップロードする

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 私はそれを動作させているChromeでのみテストしました。あなたのニーズに合わせて更新してください。脚注で

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

}

あなたは互換性のある動画をドロップしてください。すべてのビデオファイルが表示されるわけではありません。