上傳圖片，手機調用相冊和攝像頭

<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是圖片在本地的路徑
});

上傳多張圖片：

見下篇。