<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 (前端組員改善了頁面代碼,但先不貼出來了)