<body> <div class="box"> <div class="container"> <ul> <li> <form id="index" enctype='multipart/form-data' style="display:none;"> <div class="form-group"> <label for="upteainput">上传文件</label> <input id="upteainput_index" name="upfile" type="file" class="form-control-file"> </div> </form> <div class="img_box1"> <video width="100%" height="200" controls="" controlslist="nodownload nofullscreen" id="video" class="index" src=""> </video> </div> </li> </ul> </div> </div> <script src="./jquery.min.js"></script> <script> $(".img_box1").click(function () { $("#upteainput_index").click(); }) let uploadFile; $("#upteainput_index").change(function () { uploadFile = $("#upteainput_index")[0].files[0]; // console.log(uploadFile) //创建文件读取对象 var reader = new FileReader(); reader.readAsDataURL(uploadFile); //文件读取完毕 reader.onload = function(){ console.log(this.result) $(".index").attr("src", this.result) } }); </script> </body>
后续操作可以继续参照 : https://www.cnblogs.com/ukzq/p/10687402.html (前端组员改善了页面代码,但先不贴出来了)