美文网首页
浏览器下载上传文件

浏览器下载上传文件

作者: 深度_1175 | 来源:发表于2019-07-18 12:35 被阅读0次

https://www.zhangxinxu.com/wordpress/2017/07/js-text-string-download-as-html-json-file/

var funDownload = function (domImg, filename) {
    // 创建隐藏的可下载链接
    var eleLink = document.createElement('a');
    eleLink.download = filename;
    eleLink.style.display = 'none';
    // 图片转base64地址
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    var width = domImg.naturalWidth;
    var height = domImg.naturalHeight;
    context.drawImage(domImg, 0, 0);
    // 如果是PNG图片,则canvas.toDataURL('image/png')
    eleLink.href = canvas.toDataURL('image/jpeg');
    // 触发点击
    document.body.appendChild(eleLink);
    eleLink.click();
    // 然后移除
    document.body.removeChild(eleLink);
};
<script>
    // 上传csv格式的文件
    function uploadfile() {
        let reads = new FileReader();
        file = document.getElementById('file').files[0];
        reads.readAsText(file, 'utf-8');
        console.log(reads);
        reads.onload = function (e) {
            console.log(e)
            // document.getElementById('result').innerText = this.result
            document.getElementById('result').innerText = e.target.result
        };
        reads.onloadstart = function(e) {
            console.log('onloadstart ---> ', e)
        }
        reads.onloadend = function(e) {
            console.log('onloadend ---> ', e)
        }
        reads.onprogress = function(e) {
            console.log('onprogress ---> ', e)
        }
    }

    // 上传image
    function uploadfile2() {
        let reads = new FileReader();
        file = document.getElementById('file2').files[0];
        reads.readAsDataURL(file);
        console.log(reads);
        reads.onload = function (e) {
            document.getElementById('img').src = this.result;
        };
    }
</script>

相关文章

  • 上传与下载

    1.文件下载2.文件上传 文件下载 访问资源时相应头如果没有设置Content-Disposition,浏览器默认...

  • 文件的上传与下载

    文件的上传下载 依赖: 下载 步骤: 向浏览器输入消息 下载文件要获取下载文件的路径下载文件的名是啥设置想办法让浏...

  • 浏览器下载上传文件

    https://www.zhangxinxu.com/wordpress/2017/07/js-text-stri...

  • java文件下载上传

    文件上传 App图片上传 html文件上传 文件下载 文件下载 版本控制 xml版本控制

  • SSH上传下载命令

    上传文件 下载文件 上传目录 下载目录

  • spring boot 文件下载的预览和缓存

    Spring boot实现上传文件的预览和http缓存 续前节文件的简单上传和下载 如何实现图片在浏览器中的显示 ...

  • 文件上传下载

    文件上传下载对于文件上传,浏览器在上传的过程中是将文件以流的形式提交到服务器端的,如果直接使用Servlet获取上...

  • Python Selenium —— 文件上传、下载,其实很简单

    很多selenium学习者被浏览器弹出的文件上传、下载框折磨的痛不欲生,今天博主就带你们轻松搞定上传和下载问题。 ...

  • 谷歌浏览器为什么上传下载文件就奔溃

    上传下载文件时一直崩溃,搜索了一下资料,说上传下载时,重装浏览器,换浏览器,关闭搜狗输入法(没试过),但是总觉得是...

  • AFNetworking

    上传 单图片上传 多文件上传 下载 AFNetworking 断点下载

网友评论

      本文标题:浏览器下载上传文件

      本文链接:https://www.haomeiwen.com/subject/cbzklctx.html