<!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. （dfs痕迹清理兄弟篇）bfs作用效果的后效性

    dfs通过递归将每种情景分割在不同的时空,但需要对每种情况对后续时空造成的痕迹进行清理(这是对全局变量而言的,对形式变量不需要清理(因为已经被分割在不同时空)) bfs由于不是利用递归则不能分割不同的 ...

  2. 《DSP using MATLAB》Problem 3.4

    代码: %% ------------------------------------------------------------------------ %% Output Info about ...

  3. PostgREST docker-compose 试用

    PostgREST 是一款很不错的直接将pg 数据库暴露为restapi ,使用了基于行级别安全访问控制, 比较全的restapi 查询以及集成了swagger openapi docker-comp ...

  4. apache spark kubernets 部署试用

    spark 是一个不错的平台,支持rdd 分析stream 机器学习... 以下为使用kubernetes 部署的说明,以及注意的地方 具体的容器镜像使用别人已经构建好的 deploy yaml 文件 ...

  5. Zxing图片拉伸解决 Android 二维码扫描

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/aaawqqq/article/details/24852915  二维码扫描  Android Zx ...

  6. 关于 Javascript 严格模式下多文件合并时注意

    Javascript 在第一行使用 "use strict" 声明严格模式. 但是在多个 js 文件合并时就需要注意了,可能你的是严格模式,但别的文件不是,就会造成错误. 为什么使 ...

  7. tomcat源码阅读之日志记录器（Logger）

    UML图: 1.Logger接口中定义了日志的级别:FATAL.ERROR.WARNING.INFORMATION.DEBUG,通过接口函数getVerbosity获取日志级别,setVerbosit ...

  8. 【转】每天一个linux命令(25)：linux文件属性详解

    原文网址:http://www.cnblogs.com/peida/archive/2012/11/23/2783762.html Linux 文件或目录的属性主要包括:文件或目录的节点.种类.权限模 ...

  9. Logback 整合 RabbitMQ 实现统一日志输出

    原文地址:Logback 整合 RabbitMQ 实现统一日志输出 博客地址:http://www.extlight.com 一.前言 公司项目做了集群实现请求分流,由于线上或多或少会出现请求失败或系 ...

  10. github for windows 使用

    先在github上申请账号,已有略过. 下载github for windows安装,可以提前安装.NET FRAMEWORK 4.0,否则它会在线下载安装.NET 4. 安装后登录账号,不要急着CL ...