一、input file上传类型

1.指明只需要图片

<input type="file" accept='image/*'>

2.指明需要多张图片

<input type="file" multiple accept='image/*'>

3.指明调用摄像头获取图片

<input type="file" capture='camera' accept='image/*'>

4.调用摄像头并获取多张图片（摄像头只能单张获取，multiple无效）

<!-- multiple 无效 -->

<input type="file" multiple capture='camera' accept='image/*'>

 二、图片压缩上传

（1）移动端IOS上传的某些图片预览时发生了旋转？

　　你会发现手机截图，网络图片都不会有旋转问题，只有手机拍摄的才有，这就跟拍摄时的角度有问题了，所以我们通过  exif.js  获取角度（Orientation）的值，所获值分别需要旋转的角度如下：

　　　　　　　　

旋转角度 参数值
0° 1
顺时针90° 6
逆时针90° 8
180° 3 
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <script src="js/jquery-1.11.3.min.js"></script>

        <script src="js/exif.js"></script>

        <style>

            #preview{

                width:100px;

                height:110px;

            }

        </style>

    </head>

    <body>

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

        <img src="blank.gif" id="preview">

<script>

var ipt = document.getElementById('files'),

    img = document.getElementById('preview'),

    Orientation = null;

ipt.onchange = function () {

    var file = ipt.files[0],

        reader = new FileReader(),

        image = new Image();

    if(file){

        EXIF.getData(file, function() {

            Orientation = EXIF.getTag(this, 'Orientation');

            console.log(Orientation);

        });

        reader.onload = function (ev) {

            image.src = ev.target.result;

            image.onload = function () {

                var imgWidth = this.width,

                    imgHeight = this.height;

                // 控制上传图片的宽高

                if(imgWidth > imgHeight && imgWidth > 600){

                    imgWidth = 600;

                    imgHeight = Math.ceil(600 * this.height / this.width);

                }else if(imgWidth < imgHeight && imgHeight > 600){

                    imgWidth = Math.ceil(600 * this.width / this.height);

                    imgHeight = 600;

                }

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

                ctx = canvas.getContext('2d');

                canvas.width = imgWidth;

                canvas.height = imgHeight;

                if(Orientation && Orientation != 1){

                    switch(Orientation){

                        case 6:     // 旋转90度

                            canvas.width = imgHeight;

                            canvas.height = imgWidth;

                            ctx.rotate(Math.PI / 2);

                            ctx.drawImage(this, 0, -imgHeight, imgWidth, imgHeight);

                            break;

                        case 3:     // 旋转180度

                            ctx.rotate(Math.PI);

                            ctx.drawImage(this, -imgWidth, -imgHeight, imgWidth, imgHeight);

                            break;

                        case 8:     // 旋转-90度

                            canvas.width = imgHeight;

                            canvas.height = imgWidth;

                            ctx.rotate(3 * Math.PI / 2);

                            ctx.drawImage(this, -imgWidth, 0, imgWidth, imgHeight);

                            break;

                    }

                }else{

                    ctx.drawImage(this, 0, 0, imgWidth, imgHeight);

                }

                var newImageData = canvas.toDataURL("image/jpeg", 0.6);

                $("img").attr("src", newImageData.replace("data:base64", "data:image/jpeg;base64"));

            }

        }

        reader.readAsDataURL(file);

    }

}

</script>

    </body>

</html>

js 图片压缩上传（base64位）以及上传类型分类的更多相关文章

  1. 使用ajax上传图片，支持图片即时浏览，支持js图片压缩后上传给服务器

    使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器 ajax上传主要使用了 var reader = new FileReader() 此方法 js图片压缩主要是利用canvas进 ...

  2. html + js 实现图片上传，压缩，预览及图片压缩后得到Blob对象继续上传问题

    先上效果 上传图片后(设置了最多上传3张图片,三张后上传按钮消失) 点击图片放大,可以使用删除和旋转按钮 (旋转功能主要是因为ios手机拍照后上传会有写图片被自动旋转,通过旋转功能可以调正) html ...

  3. js 图片压缩上传(纯js的质量压缩，非长宽压缩)

    下面是大神整理的demo,很实用,这里存一下备用,感谢大神! 此demo为大于1M对图片进行压缩上传 若小于1M则原图上传,可以根据自己实际需求更改. demo源码如下 <!DOCTYPE ht ...

  4. js图片压缩+ajax上传

    图片压缩用到了localresizeimg 地址: https://github.com/think2011/localResizeIMG 用起来比较简单 <input type="f ...

  5. JS—图片压缩上传（单张）

    *vue+webpack环境,这里的that指到vue实例 <input type="file" name="file" accept="ima ...

  6. js图片压缩和上传并显示

    由于近期项目中需要做个图片压缩上传,所以就在网上找了些资料自己写了一个 html部分 <input id="file" type="file"> & ...

  7. Angular里使用(image-compressor.js)图片压缩

    参考资料: http://www.imooc.com/article/40038 https://github.com/xkeshi/image-compressor 示例代码: <nz-upl ...

  8. js图片压缩上传

    最近公司的移动产品相约app要做一次活动,涉及到图片上传,图片又不能太大,不然用户体验太差,必须先压缩再上传,所以用到了html5的canvas和FileReader,代码先上,小弟前端经验不足,代码 ...

  9. js图片预览插件，不涉及上传

    小小的几十行代码,很牛逼,很实用. 支持多个图片的预览,只要new多个对象就行了. html如下 <!-- zhouxiang www.zhou-xiang.com --> <!DO ...

随机推荐

  1. 阿里云杨敬宇：边缘计算行业通识与阿里云ENS的技术演进之路

    近日,阿里云杨敬宇在CSDN阿里云核心技术竞争力在线峰会上进行了<5G基础设施-阿里云边缘计算的技术演进之路>主题演讲,针对5G时代下,行业和技术的趋势.边缘计算产业通识以及阿里云边缘计算 ...

  2. （七）DVWA之SQL Injection--SQLMap测试（Low）

    目录结构 一.测试需求分析 二.SQLMap利用SQL注入漏洞,获取数据库信息 1.判断是否存在注入点 2.获取DBMS中所有的数据库名称 3.获取Web应用当前连接的数据库 4.列出数据库中的所有用 ...

  3. 天哪！手动编写mybatis雏形竟然这么简单

    前言 mybaits 在ORM 框架中,可算是半壁江山了,由于它是轻量级,半自动加载,灵活性和易拓展性.深受广大公司的喜爱,所以我们程序开发也离不开mybatis .但是我们有对mabtis 源码进行 ...

  4. nginx功能介绍和基本安装

    一.简介 nginx是一款自由的.开源的.高性能的HTTP服务器和反向代理服务器:同时也是一个IMAP.POP3.SMTP代理服务器:nginx可以作为一个HTTP服务器进行网站的发布处理,另外ngi ...

  5. InstallShield 2015 Limited Edition 打包教程

    InstallShield 2015 Limited Edition 打包教程 右键解决方案,新增项目,选择其他项目类型,安装和部署. InstallShield2015可以免费使用,但需要下载.安装 ...

  6. 【Java Spring Cloud 实战之路】添加一个SpringBootAdmin监控

    0. 前言 在之前的几章中,我们先搭建了一个项目骨架,又搭建了一个使用nacos的gateway网关项目,网关项目中并没有配置太多的东西.现在我们就接着搭建在Spring Cloud 微服务中另一个重 ...

  7. Flink 如何分流数据

    场景 分流方式 如何分流 使用Filter分流 使用Split分流 使用Side Output分流 场景 获取流数据的时候,通常需要根据所需把流拆分出其他多个流,根据不同的流再去作相应的处理. 举个例 ...

  8. [Computer Vision]Harris角点检测的详细推导

    Harris角点检测 思想 为什么要检测角点呢?因为角点的特征比较明显.进行角点检测的朴素思想是利用图像梯度,也就是根据图像强度的变化来寻找角点.如图所示 这里举了个例子,给定一个小的区域(Patch ...

  9. Git Commit 提交规范

    写好 Commit message 好处多多: 1.统一团队Git commit 日志风格 2.方便日后 Reviewing Code 3.帮助我们写好 Changelog 4.能很好的提升项目整体质 ...

  10. pom.xml 文件详解

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...