文件下载 上传 编辑 预览 web端

最新推荐文章于 2023-03-22 14:29:44 发布
最新推荐文章于 2023-03-22 14:29:44 发布
阅读量124 收藏
点赞数
分类专栏： JavaScript 文章标签： ajax javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42374676/article/details/120226669
版权

Ajax Blob FileReader 文件下载 文件预览
关键词由CSDN通过智能技术生成 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <button onclick="download()">下载</button>
    <input type="file" value="文件预览" id="upload">

    <script>
        // ---------------------------------------------------------------------------------------------
        // 文件下载 并保存
        // "http://geo.datav.aliyun.com/areas_v3/bound/geojson?code=" + 440300 + "_full"
        function ajax({
            url
        }) {
            // 参考 https://www.w3school.com.cn/xml/xml_http.asp
            let xhr = new XMLHttpRequest()
            xhr.open("GET", url, true); // 也可以使用POST方式，根据接口    true 默认 异步  false 同步  
            xhr.responseType = "blob"; // 返回类型blob
            // xhr.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
            xhr.send()
            xhr.onload = function () {
                // 请求完成
                if (this.status === 200) {
                    // console.log(this.response, '====')   // 返回数据
                    let debug = this.response
                    // -------------------------------文件下载
                    // var reader = new FileReader();
                    // reader.readAsDataURL(debug); // 转换为base64，可以直接放入a表情href
                    // reader.onload = function (e) {
                    //     // 转换完成，创建一个a标签用于下载
                    //     var a = document.createElement("a");
                    //     a.download = "000.json";
                    //     a.href = e.target.result;
                    //     a.click()
                    // }

                    // blob 下载
                    var a = document.createElement('a')
                    var blob = new Blob([debug], { type: 'text/plain' })
                    var url = window.URL.createObjectURL(blob)
                    a.href = url
                    a.download = "000.json"
                    a.click()
                    window.URL.revokeObjectURL(url)
                }
            }
        }

        // ajax({ url: "http://geo.datav.aliyun.com/areas_v3/bound/geojson?code=440300_full" })

        // ---------------------------------------------------------------------------------------------
        //  文件操作
        function download() {
            var data1 = "a";
            var blob1 = new Blob([data1]);
            console.log(blob1);  //输出：Blob {size: 1, type: ""}
            var debug = { hello: "world" };
            var blob = new Blob([JSON.stringify(debug, null, 2)], { type: 'application/json' });
            //     var file = new File([mobileCode], "手机号.txt", { type: "text/plain;charset=utf-8" });
            console.log(blob)   //  输出  Blob(22) {size: 22, type: "application/json"}
            const a = document.createElement('a');
            document.body.appendChild(a)
            a.style.display = 'none'
            const url = window.URL.createObjectURL(blob);
            a.href = url;
            a.download = 'xx.json';
            a.click();
            document.body.removeChild(a)
            window.URL.revokeObjectURL(url);
        }
        // 文件

        //  文件操作
        function file() {
            var reader = new FileReader();
            reader.readAsDataURL(blob); // 转换为base64，可以直接放入a表情href
            reader.onload = function (e) {
                // 转换完成，创建一个a标签用于下载
                var a = document.createElement("a");
                a.download = name + ".xls";
                a.href = e.target.result;
                document.append(a); // 修复firefox中无法触发click
                a.click();
                document.body.removeChild(a)
            }
        }

        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

                    // ======================== 打印数据
                    //  document.write(debug)

                    // ======================== 标签展示
                    // // 文件预览
                    // let textarea = document.createElement('textarea')
                    // textarea.value = debug;
                    // document.body.appendChild(textarea)

                    // ======================== 打开窗口
                    // var x = window.open()
                    // x.document.write(`<pre>${debug}</pre>`)
                    // x.document.close()

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

                }

                // ========================================================================== base64 预览
                // const reader = new FileReader(); //这是核心,   读取操作就是由它完成.
                // reader.readAsDataURL(file,);     // 生成base64  图片 内容 字节码  链接
                // reader.onload = (e) => {
                //     file.preview = e.target.result;
                //     // 转化样式
                //     // //  打开预览  浏览器默认支持的格式都可以预览，如：txt，pdf，图片 (网页 UTF-8 iframe 是gdk 或者其他的 因此存在编码格式不一致 )
                //     // data:text/javascript;charset=UTF-8;base64,Y2hhcnNldCA9ICJnYjIzMTIiOw0KdmFyIGEgPSAic3NzcyI7DQp2YXIgYiA9ICLmiJHmmK/osIEiOw0K
                //     var iframe = "<iframe width='100%' height='100%' src='" + e.target.result + "'></iframe>"

                //     // 引入 
                //     // document.body.getElementsByTagName('button')[0].innerHTML = 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);
    </script>
</body>

</html>


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <button onclick="download()">下载</button>
    <input type="file" value="文件预览" id="upload">
    <button id="ajax">ajax</button>
    <script src="./message.js"></script>
    <script>
        // console.log(city, '======')
        // ---------------------------------------------------------------------------------------------
        // 文件下载 并保存
        // "http://geo.datav.aliyun.com/areas_v3/bound/geojson?code=" + 440300 + "_full"
        function ajax({
            url,
            name
        }) {
            // 参考 https://www.w3school.com.cn/xml/xml_http.asp
            let xhr = new XMLHttpRequest()
            xhr.open("GET", url, true); // 也可以使用POST方式，根据接口    true 默认 异步  false 同步  
            xhr.responseType = "blob"; // 返回类型blob
            // xhr.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
            xhr.send()
            xhr.onload = function () {
                // 请求完成
                if (this.status === 200) {
                    // console.log(this.response, '====')   // 返回数据
                    let debug = this.response
                    // -------------------------------文件下载
                    // var reader = new FileReader();
                    // reader.readAsDataURL(debug); // 转换为base64，可以直接放入a表情href
                    // reader.onload = function (e) {
                    //     // 转换完成，创建一个a标签用于下载
                    //     var a = document.createElement("a");
                    //     a.download = "000.json";
                    //     a.href = e.target.result;
                    //     a.click()
                    // }

                    // blob 下载
                    var a = document.createElement('a')
                    var blob = new Blob([debug], { type: 'text/plain' })
                    var url = window.URL.createObjectURL(blob)
                    a.href = url
                    a.download = name + ".json"
                    a.click()
                    window.URL.revokeObjectURL(url)
                }
            }
        }

        document.getElementById('ajax').onclick = function () {
            var arr = Object.keys(city)
            arr.forEach((item, index) => {
                ajax({ url: "http://geo.datav.aliyun.com/areas_v3/bound/geojson?code=" + item + "_full", name: item })

            });

        }


        // ---------------------------------------------------------------------------------------------
        //  文件操作
        function download() {
            var data1 = "a";
            var blob1 = new Blob([data1]);
            console.log(blob1);  //输出：Blob {size: 1, type: ""}
            var debug = { hello: "world" };
            var blob = new Blob([JSON.stringify(debug, null, 2)], { type: 'application/json' });
            //     var file = new File([mobileCode], "手机号.txt", { type: "text/plain;charset=utf-8" });
            console.log(blob)   //  输出  Blob(22) {size: 22, type: "application/json"}
            const a = document.createElement('a');
            document.body.appendChild(a)
            a.style.display = 'none'
            const url = window.URL.createObjectURL(blob);
            a.href = url;
            a.download = 'xx.json';
            a.click();
            document.body.removeChild(a)
            window.URL.revokeObjectURL(url);
        }

        //  文件操作
        function file() {
            var reader = new FileReader();
            reader.readAsDataURL(blob); // 转换为base64，可以直接放入a表情href
            reader.onload = function (e) {
                // 转换完成，创建一个a标签用于下载
                var a = document.createElement("a");
                a.download = name + ".xls";
                a.href = e.target.result;
                document.append(a); // 修复firefox中无法触发click
                a.click();
                document.body.removeChild(a)
            }
        }

        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

                    // ======================== 打印数据
                    //  document.write(debug)

                    // ======================== 标签展示
                    // // 文件预览
                    // let textarea = document.createElement('textarea')
                    // textarea.value = debug;
                    // document.body.appendChild(textarea)

                    // ======================== 打开窗口
                    // var x = window.open()
                    // x.document.write(`<pre>${debug}</pre>`)
                    // x.document.close()

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

                }

                // ========================================================================== base64 预览
                // const reader = new FileReader(); //这是核心,   读取操作就是由它完成.
                // reader.readAsDataURL(file,);     // 生成base64  图片 内容 字节码  链接
                // reader.onload = (e) => {
                //     file.preview = e.target.result;
                //     // 转化样式
                //     // //  打开预览  浏览器默认支持的格式都可以预览，如：txt，pdf，图片 (网页 UTF-8 iframe 是gdk 或者其他的 因此存在编码格式不一致 )
                //     // data:text/javascript;charset=UTF-8;base64,Y2hhcnNldCA9ICJnYjIzMTIiOw0KdmFyIGEgPSAic3NzcyI7DQp2YXIgYiA9ICLmiJHmmK/osIEiOw0K
                //     var iframe = "<iframe width='100%' height='100%' src='" + e.target.result + "'></iframe>"

                //     // 引入 
                //     // document.body.getElementsByTagName('button')[0].innerHTML = 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);

         
    </script>
</body>

</html>
web修理工
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Web 利用H5中的FileReader实现上传文件的即时预览
Sword Art Online
02-08 289
部分效果展示 参考文档 FileReader 图片上传的预览 <form> <input type="file" id="myFile" onchange="getData();"> </form> <img src=""> <script> function getData() { ...
H5 文件上传、预览和下载 解决方案(一)
Abner 的博客 (:
01-01 3217
这里主要讲述有关于移动Web 端操作用户本地文件的解决方案。 主要内容： - 文件操作的基础知识 - 读取用户本地文件 - 处理读取文件返回的结果 - 上传到服务器 - 预览文件的实现 - 下载文件的实现 一、文件操作的基础知识 我们都知道，H5 是运行在浏览器或者各种WebView 的壳子中的，JavaScript 本身是没有访问用户本地文件的能力的。 ...
网页实现文件上传下载功能实例解析
weixin_45525177的博客
05-13 798
需求：项目要支持大文件上传功能，经过讨论，初步将文件上传大小控制在500M内，因此自己需要在项目中进行文件上传部分的调整和配置，自己将大小都以501M来进行限制。 第一步： 前端修改 由于项目使用的是BJUI前端框架，并没有使用框架本身的文件上传控件，而使用的基于jQuery的Uploadify文件上传组件，在项目使用的jslib项目中找到了BJUI框架集成jQuery Uploadify的部分，这部分代码封装在bjui-all.js文件中， 在bjui-all.js文件中的全局变量定义中有以.
解决请求https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json 返回403的问题
qiqihong4261的博客
11-01 3585
解决请求https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json 返回403的问题
echarts图表展示地图指定区域
羽筠的博客
03-22 2130
echarts地图展示指定区域 指定区域获取方式： 城市范围选择器：http://datav.aliyun.com/portal/school/atlas/area_selector echarts地图展示指定区域及经纬度设置展示标注
文件上传预览-移动端.zip
04-30
在移动端应用开发中，文件上传和图片预览是常见的需求，尤其在社交、电商或个人资料编辑等场景中。这个名为“文件上传预览-移动端.zip”的压缩包可能包含了一个JavaScript插件，用于帮助开发者实现在移动设备上方便...
图片上传 预览 编辑 5个示例项目集合
02-28
在IT行业中，图片上传、预览和编辑是常见的功能需求，尤其在Web应用和移动应用中，用户常常需要上传自己的照片或图片进行编辑处理。这个"图片上传 预览 编辑 5个示例项目集合"提供了一个实用的资源库，包含了五个...
基于Java的WPS在线编辑和预览后台服务设计源码
最新发布
04-07
本项目是一个基于Java语言开发的WPS在线编辑和预览后台服务，包含...系统设计旨在为用户提供一个高效、便捷的在线文档编辑和预览服务，支持文档的在线编辑、预览、上传、下载等功能，以满足用户在文档处理方面的需求。
zyUpload文件上传预览示例
09-06
zyUpload文件上传预览示例是一个综合性的前端技术实现，主要应用于网页上的多文件上传功能。这个示例代码集成了多种实用特性，如多文件选择、文件删除、以及预览功能，为用户提供了一种便捷的方式来处理批量文件上传...
FileSmartUpload-文件上传下载页面实现
12-11
在IT行业中，文件上传和下载是Web应用的基本功能之一，特别是在企业级系统中，用户经常需要上传文件，如文档、图片、视频等，同时也需要能够方便地下载这些资源。本项目"FileSmartUpload-文件上传下载页面实现"是...
亲测，以html形式显示或预览word，excel，pdf，txt
05-24
本源码主要是ASP.net后台通过相应的类把word\excel\pdf\txt文件转化为html,将地址传回前端,前端获取地址，用iframe进行展现预览。
JavaWeb在线预览文件
08-22
支持office，wps , img 解决 xls显示不全问题。 内实现office to pdf ，office to img 其他需自己开发实现
基于阿里地图围栏数据，Java离线经纬度逆地址解析省份城市
u014080107的博客
08-30 3248
由于项目需要离线本地化，通过离线经纬度解析出省份城市信息 一通查询资料，有非JAVA的，有功能过多过于笨重的，有资源需要收费的 emmm 干脆还是自己动手丰衣足食 技术点：JAVA java.awt.Polygon.contains方法 查询坐标是否包含再多边形中 资源：https://datav.aliyun.com/tools/atlas/index.html下载所需要的省份城市信息，下载中国城市级别可以参考下面文末下载地图命令 也整理一份到资料中；特别说明，如果解析城市北京上海重庆天津澳门香.
echarts实现单个城市下所有区域地图
zhiliwudi的博客
09-30 1363
echarts实现单个城市下所有区域地图
antd charts实现地图下钻
liuxiaocaogu的博客
12-27 746
我在里面加了一段其他大佬写的增加meta标签的代码，主要原因是部署到服务器时显示403，也就是说产生跨域问题了，因为这个接口是第三方接口，请求时会产生一个referrer的请求头，所以直接403获取不到，加个meta标签就可以解决，地图下钻就是这么简单。一直好奇为什么百度几乎看不大使用antd自己封装的charts做的地图下钻，后来发现可能是太简单了大家都不屑写，那我写，我是小白啥也不懂。
Python-阿里云地图的爬取
m0_54214980的博客
12-23 2408
from IPython.core.interactiveshell import InteractiveShell InteractiveShell.ast_node_interactivity = "all" # 代码块显示所有执行结果 引言   这里通过循环爬取阿里云省级地图，并处理交叉点，再通过对行政区域代码递归，爬取市级地图，县级地图。最后爬取民政部南海九段线数据。每 次爬去后都保存json格式文件。对于4个直辖市这种，省级和市级都是相同的名字和行政区域代码。对于港澳台这种，省级、市级、县..
Echart地图的省级，以及所有地市级下载与使用
觉醒法师的专栏
08-08 3606
echart在开发地图时，会遇到下钻显示子区域地图数据。比如江苏省，下钻到市级南京，南京再下钻到区级。在阿里的数据可视化平台，可以通过ajax方式：`https://geo.datav.aliyun.com/areas_v3/bound/${code}_full.json` 进行获取，但有些项目需要在本地不联网状态下正常显示。此时我们就需要把每级数据的json文件下载下来，但一个一个下载太麻烦，这里提供一段nodejs抓取数据代码，通过上级区域数据的地址，就可以下载所有下级数据了。......
利用Echarts+阿里云地图选择器绘制可交互的行政区划地图
热门推荐
Achernar0208的博客
06-25 1万+
利用Echarts+阿里云地图选择器绘制可交互的行政区划地图
java大文件(百M以上)的上传下载控件
weixin_45525177的博客
09-15 444
java两台服务器之间，大文件上传（续传），采用了Socket通信机制以及JavaIO流两个技术点，具体思路如下： 实现思路： 1、服：利用ServerSocket搭建服务器，开启相应端口，进行长连接操作 2、服：使用ServerSocket.accept()方法进行阻塞，接收客户端请求 3、服：每接收到一个Socket就建立一个新的线程来处理它 4、客：利用Socket进行远程连接，询问已上传进度 5、客：使用FileInputStream.skip(long length)从指定位置读.
PHP7实现图片上传下载功能教程
在PHP中实现图片的上传与下载是Web开发中的常见功能，尤其适用于构建图像分享平台或者在线商店等应用。本案例基于PHP 7，结合Apache服务器和MySQL数据库，展示了如何完成这一过程。 1. **环境配置** - 开发环境为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

web修理工

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值