javascript - Js drag&drop image/video upload with preview -
my goal have drag , drop upload box videos , images, populate file in exact shape , size of box.
you can see snippet here: http://jsfiddle.net/elcf6/4/
can't figure out, how add same functionality video upload same box. appreciate help.
here's snippet:
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 images preview , set userprofile_picture data <img src=""/> <input type="file" name="userprofile_picture" id="filephoto" /> </div>
not fix, suggestion, had make client side uploading before, found using http://www.dropzonejs.com/ easier.
Comments
Post a Comment