<!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. 字符串的比较【string和字符数组】

    无论是string 还是 字符数组的字符串比较函数,返回的都是字典序的大小.如 1234 和 5 比较时就是1234的字典序小于5,要想比较字符串表示的数字的大小,需要自己写函数比较

  2. SQLyog Enterprise常用快捷键

    1. SQL格式化 F12 格式化当前行所在的SQL Ctrl+F12    格式化选中的SQL Shift+F12   格式化所有SQL 2. 窗口操作 Ctrl+T 打开一个新的查询窗口 Alt+ ...

  3. java导出Excel 好文收藏

    http://www.cnblogs.com/Damon-Luo/p/5919656.html https://www.cnblogs.com/klguang/p/6425422.html

  4. Patch打补丁学习笔记

    1.基本命令语法: patch [-R] {-p(n)} [--dry-run] < patch_file_name p:为path的缩写. n:指将patch文件中的path第n条’/’及其左 ...

  5. citus real-time 分析demo（ 来自官方文档）

      citus 对于多租户以及实时应用的开发都是比较好的,官方也提供了demo 参考项目 https://github.com/rongfengliang/citus-hasuar-graphql 环 ...

  6. hasura graphql-engine v1.0.0-alpha25 的几个方便功能

    hasura graphql-engine 是一个很不错的graphql 引擎,但是我们的数据模型经常可能会有变动, 但是以前的版本对于这些的处理,官方的方式是删除元数据,重启server,都不是很好 ...

  7. 构建一个dbt 数据库适配器

    脚手架新的适配器 首先,将odbc适配器模板复制到同一目录中的新文件. 更新dbt / adapters / factory.py以将新适配器包含为类型.还要将类型添加到dbt / contracts ...

  8. 使用gitblit搭建一个简单的局域网服务器

    使用gitblit搭建一个简单的局域网服务器 1.使用背景 现在很多使用github管理代码,但是github需要互联网的支持,而且私有的git库需要收费.有一些项目的代码不能外泄,所以,搭建一个局域 ...

  9. django admin model使用技巧

    自定义记录返回值班 和 表名 class Guys(models.Model): first_name = models.CharField(max_length=30) last_name = mo ...

  10. Linux如何用yum安装软件或服务

    百度百科: Yum(全称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及CentOS中的Shell前端软件包管理器.基于RPM包管理,能够从指定的服 ...