js实现图片、视屏上传在线预览功能
关键代码如下:
css模块:
<style>
.fileBox{
width: 500px;
height: 300px;
border: 1px solid black;
}
video{
width: 500px;
height: 300px;
}
img{
width: 500px;
height: 300px;
}
</style>
html模块:
<div class="box">
<p class="fileBox">存放图片的位置</p>
<input type="file" id="file" class="inputCon">
</div>
js模块:
$(".inputCon").change(function(){
let file = document.getElementById('file').files[0];
let fr = new FileReader();
fr.readAsDataURL(file); //将文件读取为tata Url
fr.onload = function(e){
let result = e.target.result;
// 图片上传
if(/image/g.test(file.type)){
let img = $('<img src="'+ result+'">');
$(".fileBox").html("").append(img);
}
// 视屏上传
else if(/video/g.test(file.type)){
let video = $('<video controls src="'+ result +'">');
$(".fileBox").html("").append(video);
}
}
});