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

浏览器下载上传文件

作者: 深度_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>
    

    相关文章

      网友评论

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

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