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>