js实现图片、视屏上传在线预览功能

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