js原生上传限制pdf，并展示pdf文件

最新推荐文章于 2024-03-13 17:22:22 发布

七柒蕲

最新推荐文章于 2024-03-13 17:22:22 发布

阅读量2.2k

点赞数

文章标签： js

本文链接：https://blog.csdn.net/webbirds/article/details/111788699

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery.js"></script>
</head>
<body>
    <!-- input中type属性设置为file，默认为上传，accpet限制上传文件类型为pdf -->
    <input type="file" id="fileupload" accept="application/pdf">
    <br />
    <iframe id="pdf" style="display: none;width: 600px;height: 800px"></iframe>
</body>
<script>
    $(function () {
        // 为上传绑定一个change事件，点击选择文件触发
        $('#fileupload').change(function (e) {  
            // this.files获取到上传文件的所有内容，如下：
            // FileList {0: File(163341), length: 1}
            // 0: File(163341)
            // lastModified: 1600682969081
            // lastModifiedDate: Mon Sep 21 2020 18:09:29 GMT+0800 (中国标准时间) {}
            // name: "小客车增量指标确认通知书.pdf"
            // size: 163341
            // type: "application/pdf"
            // webkitRelativePath: ""
            // __proto__: File
            // length: 1
            // __proto__: FileList
            console.log(this.files)
            let file = this.files[0];
            if(!file) return;

            // fileReader 文件读取类
            let reader = new FileReader;

            reader.readAsDataURL(file)
            reader.onload = function(ev) {
                var pdfInfo = ev.target.result;
                console.log(pdfInfo)
                $('#pdf').css('display','block')
                $('#pdf').attr('src',pdfInfo)
                console.log(ev)
            }

            
        })
    })
</script>
</html>