<!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. CTF-练习平台-Misc之 多种方法解决

    五.多种方法解决 题目提示:在做题过程中你会得到一个二维码图片 下载文件后解压发现是一个exe文件,打开后报错:将文件后缀名改为txt打开后发现是base64编码 联系到提示说最后是一个二维码,将它转 ...

  2. List<Map<String, Integer>> 同key的value全部累加合并

    public static void main(String[] args){ List<Map<String,Object>> list1 = new ArrayList&l ...

  3. POJ2311 Cutting Game

    题意 Language:Default Cutting Game Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 6007 Acc ...

  4. 理解cookie和session技术

    一.HTTP协议的无状态性 WEB应用程序使用的是HTTP协议传输数据的,HTTP协议是一个无状态的协议,这次数据传输完毕,客户端会和服务端断开连接,再次传输数据就需要重新建立新的连接,这也就无法会话 ...

  5. M端计算rem方法

    (function(){var a=document.documentElement.clientWidth||document.body.clientWidth;if(a>460){a=460 ...

  6. selinux操作

    setenforce 0 关闭SELinux setenforce 1 临时打开SELinux getenforce 查看SELinux状态 永久关闭SELinux : # cat /etc/seli ...

  7. java调用.net的webservice

    目录(?)[-] 一参考文献 二概述 三实例 注意点   一.参考文献 1. http://www.cnblogs.com/xuqifa100/archive/2007/12/13/993926.ht ...

  8. 自适应巡航控制系统——ACC

    ACC(Adaptive Cruise Control)自适应巡航控制系统(以下简称ACC)是一种基于传感器识别技术而诞生的智能巡航控制,相比只能根据驾驶者设置的速度进行恒定速度巡航的传统巡航控制系统 ...

  9. 【转】每天一个linux命令（20）：find命令之exec

    原文网址:http://www.cnblogs.com/peida/archive/2012/11/14/2769248.html find是我们很常用的一个Linux命令,但是我们一般查找出来的并不 ...

  10. Yarn、MapReduce、spark、storm的关系

    YARN并不是下一代 MapReduce (MRv2),下一代 MapReduce 与第一代 MapReduce (MRv1)在编程接口.数据处理引擎(MapTask和ReduceTask)是完全一样 ...