<!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. 关于bfs与dfs的标记区别

    回顾一下dfs与bfs的使用,由于二者都需要避免走重复的路,所以二者都需要对数组进行标记 而二者的标记操作的不同点是 dfs会对数组的标记进行清除(包含两种标记,一种对形参变量的标记,这个清除是返回上 ...

  2. test20180922 倾斜的线

    题意 问题描述 给定两个正整数P和Q.在二维平面上有n个整点.现在请你找到一对点使得经过它们的直线的斜率在数值上最接近P/Q(即这条直线的斜率与P/Q的差最小),请输出经过它们直线的斜率p/q.如果有 ...

  3. 下载各个版本java （Java Development Kit）

    本文介绍怎么样下载各个版本java开发工具包. 方法/步骤   打开官方下载网址:http://www.oracle.com/technetwork/java/javase/downloads/ind ...

  4. 关于jdbc的面试题

    什么是JDBC,在什么时候会用到它? JDBC的全称是Java DataBase Connection,也就是Java数据库连接,我们可以用它来操作关系型数据库.JDBC接口及相关类在java.sql ...

  5. MVC ASP.NET MVC各个版本的区别 (转)

    Net Framework4.5是不支持安装在window server 2003上,如非装请用net framework4.0; MVC1.0 publsh time:2008 IDEV:VS200 ...

  6. Microsoft Dynamics CRM 4.0 如何添加自定义按钮

    一.通过导入导出ISV.Config(ISV配置),具体如下图: 先设置—>打开导出自定义项—>选择ISV配置—>选择导出所选自定义项 点击确定 保存到桌面,解压,用VS打开cust ...

  7. Linux Home目录硬盘空间缩减

    Linux Home目录硬盘空间缩减 操作   基于centos6.5 x86_64, runlevel 3,命令行模式,测试成功. 1.首先查看磁盘使用情况 [root@localhost ~]# ...

  8. elastic-job 分布式定时任务框架 在 SpringBoot 中如何使用（一）初始化任务并定时执行

    第一篇需要实现一个最简单的需求:某个任务定时执行,多台机子只让其中一台机子执行任务 一.安装 分布式应用程序协调服务 zookeeper,安装步骤在链接里面 Linux(Centos7)下安装 zoo ...

  9. Oracle 10g下emctl start dbconsole 报错：OC4J Configuration issue 问题解决

    http://blog.sina.com.cn/s/blog_95b5eb8c0100x4a7.html http://blog.csdn.net/sz_bdqn/article/details/17 ...

  10. SQL Server Management Studio (SSMS) 清除登录记录

    对于 SQL Server 2005 Management Studio,可以删除以下文件清空该列表: WinXP: C:\Documents and Settings\<user>\Ap ...