Js通过预览功能拖放图像/视频上传
我的目标是为视频和图像设置拖放上传框,以将文件填充到框的确切形状和大小。Js通过预览功能拖放图像/视频上传
您可以在这里看到的片段: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>
您正在搜索的关键字是:createObjectURL。
https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL
然而,浏览器必须支持它。
嘿耶尔!非常感谢!我会检查出来,看看它是否适用于我:) –
好,所以你试图从视频文件中提取图像数据,这不一定工作。你真正需要的是一个隐藏的视频领域和HTML5画布。当你放弃视频文件时,你会填充视频源,然后在你检测到任何图像数据时通过画布播放它,你将能够以相同的方式显示它图片。关于如何通过*上的画布播放视频以及实际上难以放在一起的答案有很多答案。
嗨维克,感谢您花时间留下评论!我会研究它。希望我能快速弄清楚 –
我想说的最简单的选择就是当你放下视频时,你实际上填充了视频场的src,寻找到中间并禁用控件并应用相同的样式。 – Vic
我已经更新了你的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]);
}
在脚注确保你把兼容的视频。并非所有视频文件都会显示。
嘿维克,感谢一百万!它实际上工作!真棒!但是,在上传后您是否还有一种在该窗口中播放视频的方式? –
更新:我试图将它添加到我的WordPress的,它不会工作,但它在http://jsfiddle.net/ELcf6/568/上工作 - 它驱使我crrrraaazyyyy :( –
是的技术上你应该需要(http://jsfiddle.net/ELcf6/570/) – Vic
因此,这是一个建议,而不是修复/答案不应该被发布为评论,而不是答案? – NewToJS