<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>JS文件上传</title>

    <script type="text/javascript" src="../js/jQuery.js"></script>

    <style type="text/css">

        * {

            margin: 0;

            padding: 0;

        }

        #img {

            display: block;

            width: 9.98rem;

            height: 6rem;

            border: .01rem solid black;

        }

        #file {

            display: block;

            margin: -6rem 0 0 0;

            opacity: 0;

            width: 10rem;

            height: 6rem;

        }

        #submit {

            display: block;

            width: 5rem;

            height: 2rem;

            margin: .5rem 2.5rem;

            font-size: .45rem;

            text-align: center;

            line-height: 2rem;

        }

    </style>

</head>

<body>

    <img id="img" src="" />

    <input id="file" type="file" />

    <input id="submit" type="button" value="提交文件" />

</body>

</html>

<script type="text/javascript">

    // rem布局

    $('html').css('font-size', $(window).width() / 10);

    // 实例化文件输入框的读取对象

    var fileReader = new FileReader();

    var base64File = null;

    // 当文件输入框读取到文件时

    $('#file').on('change', function(){

        // 获取文件列表

        var fileList = $("#file")[0].files;

        fileReader.onload = function(e){

            // 获取扩展名

            var extensionName = fileList[0].name.split('.');

            extensionName = extensionName[extensionName.length -1];

            // 获取文件的base64编码

            var base64 = e.target.result;

            // 将读取 文件放置到一个img标签

            $('#img').attr('src', base64);

            // 当文件加载完成后进行压缩

            var img = $('#img')[0];

            img.onload = function(){

                // 将文件和文件扩展名拼接

                base64File = cutDowmImg(img, 100).split(',')[1] + "." + extensionName;

                // 将拼接后的字符串加密

                base64File = encodeURIComponent(base64File);

            }

        }

        fileReader.readAsDataURL(fileList[0]);

    });

    // 提交图片

    $('#submit').on('click', function(){

        console.log(base64File);

        $.post("http://192.168.0.105/WebTest/Base64UploadServlet", {file: base64File}, function(e){

            console.log(e);

        })

    });

    // 压缩图片的方法

    function cutDowmImg(img, width){

        var canvas = document.createElement("canvas");

        canvas.width = Math.min(img.width, width);

        canvas.height = img.height*width/img.width;

        var cxt = canvas.getContext("2d");

        cxt.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);

        return canvas.toDataURL();

    }

</script>

HTML5 通过文件输入框读取文件为base64文件, 并借助canvas压缩 FileReader, files, drawImage的更多相关文章

  1. ios本地文件内容读取，.json .plist 文件读写

    ios本地文件内容读取,.json .plist 文件读写 本地文件.json .plist文件是较为常用的存储本地数据的文件,对这些文件的操作也是一种常用的基础. 本文同时提供初始化变量的比较标准的 ...

  2. IO文件的读取，以及写入文件内容

    package zxc; import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.Fi ...

  3. php下载文件，解压文件，读取并写入新文件

    以下代码都是本人在工作中遇到的问题,并完成的具体代码和注释,不多说,直接上代码: <?php      //组织链接      $dataurl = "http://118.194.2 ...

  4. ca75a_c++_标准IO库-利用流对象把文件内容读取到向量-操作文件

    /*ca75a_c++_标准IO库习题练习习题8.3,8.4,8.6习题8.9.8.10 ifstream inFile(fileName.c_str());1>d:\users\txwtech ...

  5. 可以在一个html的文件当中读取另一个html文件的内容

    1.IFrame引入,看看下面的代码 <IFRAME NAME="content_frame" width=100% height=30 marginwidth=0 marg ...

  6. 把一个文件中所有文件名或者文件路径读取到一个txt文件，然后在matlab中读取

    链接: http://blog.csdn.net/dreamgchuan/article/details/51113295 dir /on/b/s  这个读取的是这样的格式:

  7. 基于vue上传base64图片，通过canvas压缩base64

    其实和vue关系不大,和我们之前做上传压缩性质是一样的 当然下面的代码是没有处理ios横屏拍照的bug的 有兴趣的可以多搜一下  网上都有相应的解答 .. var that = this if (e. ...

  8. C 语言函数手册：涵盖字符测试、字符串操作、内存管理、时间换算、数学计算、文件操作、进程管理、文件权限控制、信号处理、接口处理、环境变量、终端控制

    1. 字符测试函数 函数 说明 isascii() 判断字符是否为ASCII码字符 2. 字符串操作 函数 说明 gcvt() 将浮点型数转换为字符串(四舍五入) index() 查找字符串并返回首次 ...

  9. HTML5之fileReader异步读取文件及文件切片读取

    fileReader的方法与事件 fileReade实现图片预加载 fileReade实现文件读取进度条 fileReade的与file.s实现文件切片读取 一.fileReader的方法与事件 1. ...

随机推荐

  1. hdu 5184 类卡特兰数+逆元

    BC # 32 1003 题意:定义了括号的合法排列方式,给出一个排列的前一段,问能组成多少种合法的排列. 这道题和鹏神研究卡特兰数的推导和在这题中的结论式的推导: 首先就是如何理解从题意演变到卡特兰 ...

  2. hasura-graphql 集成 pipelinedb 1.0.0

    pipelinedb 1.0.0 已经是一个标准的pg 扩展了,同时以前的语法也有变动,但是集成进hasura-graphql 更方便了 使用docker-compose 运行 环境准备 docker ...

  3. vsto excel 任务窗体操作

    1. 开发环境visual studio 2010 2. office 2007 代码: 1.任务窗体 代码: partial class ActionsPaneControl1 : UserCont ...

  4. HTML/CSS/Javascript代码在线压缩、格式化(美化)工具

    CSS 格式化 ProCSSor - http://procssor.com/   CSS 压缩 CSS Compressor - http://www.cssdrive.com/index.php/ ...

  5. Json之语法

    JSON 文本格式在语法上与创建 JavaScript 对象的代码相同. 由于这种相似性,无需解析器,JavaScript 程序能够使用内建的 eval() 函数,用 JSON 数据来生成原生的 Ja ...

  6. 微信小程序的视频教程

    极客学院小程序视频教程: 链接:https://pan.baidu.com/s/1VpKnvnsn-T6Nd79bsi4ugg 密码:0ta9 小程序项目实战: 链接:https://pan.baid ...

  7. gcc gdb调试 (二)

    GDB的命令概貌——————— 启动gdb后,就你被带入gdb的调试环境中,就可以使用gdb的命令开始调试程序了,gdb的命令可以使用help命令来查看,如下所示: /home/hchen> g ...

  8. 错误：Unsupported major.minor version 51.0（jdk版本错误）

    Java.lang.UnsupportedClassVersionError: org/apache/nutch/crawl/Crawl3 : Unsupported major.minor vers ...

  9. Centos 6.5将光盘作为yum源的设置方法

    Centos 6.5将光盘作为yum源的设置方法 在使用Centos 的时候,用yum来安装软件包是再方便不过了,但是如果在无法连接互联网的情况下,yum就不好用了. 下面介绍一种方式,就是将Cent ...

  10. 逻辑斯蒂回归（Logistic Regression）

    逻辑回归名字比较古怪,看上去是回归,却是一个简单的二分类模型. 逻辑回归的模型是如下形式: 其中x是features,θ是feature的权重,σ是sigmoid函数.将θ0视为θ0*x0(x0取值为 ...