一、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)的值,所获值分别需要旋转的角度如下:

        

旋转角度 参数值
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. iOS大神牛人的博客集合

    王巍的博客:王巍目前在日本横滨任职于LINE.工作内容主要进行Unity3D开发,8小时之外经常进行iOS/Mac开发.他的陈列柜中已有多款应用,其中番茄工作法工具非常棒. http://onevca ...

  2. Android之 环境搭建

    一. 使用ADT Bundle多合一下载包 下载地址:链接:http://pan.baidu.com/s/1gepNRjX  密码: ozdi 说      明:多合一下载包,里面包含了:sdk + ...

  3. SSH-KEY服务及批量分发与管理实战

    SSH服务 一.SSH服务介绍 SSH是Secure Shell Protocol的简写,由IETF网络工作小组制定:在进行数据传输之前,SSH先对联机数据包通过加密技术进行加密处理,加密后再进行数据 ...

  4. mysql中 的 ENGINE = innodb; 是什么意思?

    存储引擎是innodb.nnoDB 是 MySQL 上第一个提供外键约束的数据存储引擎,除了提供事务处理外,InnoDB 还支持行锁,提供和 Oracle 一样的一致性的不加锁读取,能增加并发读的用户 ...

  5. 手机端的表单验证和PC端的不同

    1.手机端:由于页面小的局限性,表单验证从上到下依次进行,如果上一个验证不通过,则给出错误提示,代码中return回去,不必进行下一个的校验: 2.PC端:页面范围大,一般是在表单的后面或者下面,提示 ...

  6. Codeforces Round #313 A Currency System in Geraldion

    A  Currency System in Geraldion Time Limit:2000MS     Memory Limit:262144KB     64bit IO Format:%I64 ...

  7. 观察者模式与Boost.Signals

      1)  观察者模式定义 略,各种设计模式的书上都有定义. 2)  观察者模式一般实现 观察者模式一般实现,都是“被观察者”保存一个“观察者”的列表,循环这个列表来通知“观察者”.代码,其中使用了b ...

  8. Win32 API中的user32.dll中的ShowWindow方法参数整理

    在使用ShowWindow方法来设置窗体的状态时,由于不知道参数值,用起来非常容易混乱,所以整理了以下其参数的枚举值,方便以后的的使用.   public class User32API { #reg ...

  9. background属性的学习整理转述

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! background我们一般用到的的属性有: background-attachment:背景(图片)是否 ...

  10. 虚拟机扩容mac

    VMware虚拟机Mac增大容量: 1.设置硬盘容量大小 2.打开虚拟机的终端,找到需要扩展的硬盘.输入命令 :diskutil list 注意 :我的硬盘名字叫yz,这一行可以看见当前分配容量,最后 ...