iframe 的基本用法

最新推荐文章于 2024-09-11 21:57:53 发布

web修理工

最新推荐文章于 2024-09-11 21:57:53 发布

阅读量5.3k

点赞数

分类专栏： JavaScript 文章标签： html5 javascript html

本文链接：https://blog.csdn.net/qq_42374676/article/details/120224672

版权

JavaScript 专栏收录该内容

163 篇文章 2 订阅

订阅专栏

该博客介绍了如何通过JavaScript的FileReader API实现文件预览，包括使用iframesrc展示HTML、文件链接和Base64编码的链接。文章详细展示了读取文件内容、转化为Base64字符串以及在新窗口中预览文件的过程，特别是针对包含中文内容的文件，使用了'gbk'编码进行读取。

摘要由CSDN通过智能技术生成

1.iframe src 可以展示 index.html 网页
2.iframe src 可以展示文件链接
3…iframe src 可以展示 base64 链接

    const input = document.querySelector("#upload");
        input.addEventListener('change', function () {
            const files = this.files;
            console.log(files, '===123')
            const fileList = Object.entries(files).map(([_, file]) => {

                //  导入浏览器重
                // 文件的方法
                // var file = fileInput.files[0];
                // if (window.FileReader) {
                //     var reader = new FileReader();
                //     reader.onloadend = function (evt) {
                //         if (evt.target.readyState == FileReader.DONE) {
                //             callback(evt.target.result);
                //         }
                //     };
                //     // 包含中文内容用gbk编码
                //     reader.readAsText(file, 'gbk');
                // }
                // ------------------------------------------------------------------

                // const reader = new FileReader(); //这是核心,读取操作就是由它完成.
                // reader.readAsText(file);//读取文件的内容,也可以读取文件的URL
                // reader.onload = function () {
                //     //当读取完成后回调这个函数,然后此时文件的内容存储到了result中,直接操作即可
                //     console.log(this.result);

                //     let debug = this.result

                //     // 文件预览

                //     // let textarea = document.createElement('textarea')
                //     // textarea.value = debug;

                //     // document.body.appendChild(textarea)


                //     // 生成文件链接 iframe 来解析文件连接======================================
                //     // var blob = new Blob([debug], { type: 'text/plain' })
                //     // var url = window.URL.createObjectURL(blob)
                //     // //  打开预览  浏览器默认支持的格式都可以预览，如：txt，pdf，图片
                //     // var iframe = `<iframe  width='100%' height='100%' src=${url}></iframe > `
                //     // var x = window.open()
                //     // x.document.open()
                //     // // charset="gb2312"
                //     // // charset="gbk"
                //     // // charset="UTF-8"

                //     // // x.document.charset = "gbk"
                //     // // x.document.designMode = "On"
                //     // x.document.write(iframe)
                //     // x.document.close()

                // }

                // ========================================================================== base64 预览
                const reader = new FileReader(); //这是核心,   读取操作就是由它完成.
                reader.readAsDataURL(file, 'gbk');     // 生成base64  图片 内容 字节码  链接
                reader.onload = (e) => {

                    file.preview = e.target.result;

                    // 转化样式


                    // //  打开预览  浏览器默认支持的格式都可以预览，如：txt，pdf，图片
                    var iframe = "<iframe width='100%' height='100%' src='" + e.target.result + "'></iframe>"
                    var x = window.open()
                    x.document.open()
                    x.document.write(iframe)
                    x.document.close()


                    // 打开界面方式
                    // <a href="data:xxxxx"> 点击跳转
                    //  window.open(“data:xxx”)
                    //  window.location="data:xxx"

                    // 打开图片
                    // const img = new Image();
                    // img.src = this.base64String;
                    // const newWin = window.open("", "_blank");
                    // newWin.document.write(img.outerHTML);
                    // newWin.document.title = "流程图"
                    // newWin.document.close();

                }
                return file;




            });



            /* 
            *  file中的preview存的就是可以预览使用url,如果你需要保证fileList的顺序,
            *  请不要使用这种方式,你可以采用索引的方式存储,来保证它的顺序一致性
            */
            // console.log(fileList);
        }, false);