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

最新推荐文章于 2024-04-26 10:22:03 发布

weixin_34356555

最新推荐文章于 2024-04-26 10:22:03 发布

阅读量324

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/ukzq/p/10691103.html

版权

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

转载于:https://www.cnblogs.com/ukzq/p/10691103.html

weixin_34356555

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[js] - 前端FileReader使用,适用于文件上传预览.(并未传入后端)

<body> <div class="box"> <div class="container"> <ul> <li> <form id="index" enctype='multipart/form-...
复制链接

扫一扫