file 上传图片和视频并显示在前端页面

css:#img_wrap{
           padding: 10px;
           display: flex;
           flex-wrap: wrap;
           /*border: 1px solid red;*/
       }

       #img_wrap>img{
           width: 33%;
           height: 120px;
       }
       #img_wrap>video{
           width: 33%;
           height: 120px;
       }

//往往我们在写样式时会隐藏input，在上面放一张上传的图片，这里采用了背景图片的添加的图片，因为如果里面用定位img跟input是同一级别是点击时谷歌会清除图片，这是如果选择取消上传就不会触发change事件，那么这里就是空白，用背景图片不会出现这种情况
       .chose_input{
           background-image: url(addIcon.png);
           background-size: 100% 100%;
           width: 33%;
           height: 120px;
           float: left;
       }
       #file{
           opacity: 0;
           width: 100%;
           height: 120px;
       }

html:

//上传图片隐藏input标签

js:

document.getElementById("file").addEventListener("change",function (res) {
      $('#img_wrap').html('');
      $('#img_wrap').append('<div class="chose_input"><input id="file" accept="image/*,video/*" type="file" capture="camera" multiple="multiple"/></div>')
      console.log($(this)[0].files)
      for (let i = 0; i < $(this)[0].files.length; i++) {
          let fileObj = $(this)[0].files[i];
   //利用内置对象文件阅读器生成文件对象的二进制数据
   let fileReader = new FileReader();
   //将文件对象交给文件阅读器，生成文件对象的二进制数据
   fileReader.readAsDataURL(fileObj); //异步

   fileReader.onload = function () {
       let src=fileReader.result;
       if(src.indexOf("video")!=-1){
           $('#img_wrap').append('<video class="big" type="1" src="'+src+'"></video>')

       }
       if(src.indexOf("image")!=-1){
           $('#img_wrap').append('<img class="big" type="0" src="'+src+'">')

       }

}
}
});

file 上传图片和视频并显示在前端页面

相关推荐