<input type="file" id="camera" multiple="multiple" capture="camera" accept="image/*"> 上传图片，手机调用相册和摄像头

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

1、首先消除原有样式，再内置于其他标签，可美化。

#camera{
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
width: 128px;
height: 30px;
position: absolute;
display:block;
}

用过两次都发现页面自动生成另一个大的<input>,点击同样会弹出文件选择框，可以用下面的代码清除这个多的。

input[type="file" i]::-webkit-file-upload-button {
-webkit-appearance: push-button;
white-space: nowrap;
font-size: inherit;
-webkit-user-modify: read-only;
margin: 0px;
display:none;//主要是这个
}

JS：

获得上传的图片，在页面中显示：

$("#camera").change(function(e){
var files = e.target.files||e.dataTransfer.files;
var reader = new FileReader();
reader.onload=function(){
var span="<span class=\"imgItem\" ><img src='"+this.result+"'/></span>"
$(".imgCon").html(span);
}
reader.readAsDataURL(files[0]);//项目中只限定上传单张图片。

selImgPath=this.value;//this.value是图片储存在本地的base64编码。

this.result是图片在本地的路径
});

上传多张图片：

见下篇。