<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是图片在本地的路径
});
上传多张图片：
见下篇。