[js] - 前端FileReader使用,适用于文件上传预览.(并未传入后端) 

<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 (前端组员改善了页面代码,但先不贴出来了)

 

posted @ 2019-04-11 17:32  ukyo--BlackJesus  阅读(895)  评论(1)  编辑  收藏  举报