應用的平台環境：安卓webview;
涉及的技術點：
（1） ：在開發中，安卓webview預設點擊無法呼叫檔案選擇與相機拍照（其他的裝置ios等瀏覽器沒有此問題），需要讓安卓開發同學在程式碼調整即可；
（2） 點擊選擇圖片後如何展示在頁面上呢？很多開發人員估計是直接取得 this.value，這是錯誤的，不可行。有2個API可以現實，new FileReader與window.URL.createObjectURL（最優）；
new FileReader的實作如下：
upload
<input type="file" name="" id="j-file">
<img src="" id='j-img' alt="" width="100%">
<button id='j-btn'>upload</button>
<script type="text/javascript">
var o_file = document.getElementById('j-file'),
o_btn = document.getElementById('j-btn'),
o_img = document.getElementById('j-img');
o_file.addEventListener('change',function(event){ var file = event.target.files[0]; if(!file) return; var url = window.URL.createObjectURL(file); if(/image/.test(file.type)){
o_img.setAttribute('src',url);
}else{
console.log('请选择图片');
}
},false);
o_btn.onclick = function(){ var data = new FormData();
data.append('file_a',o_file.files[0]);
data.append('text','test');
console.log(data);
} </script>在安卓webview實戰中，讀取與寫入速度相當慢，不建議； //-------------- -------------------------------------------------- -------------------------
window.URL.createObjectURL實作如下：
<input type="file" name="" id="j-file">
<img src="" id='j-img' alt="" width="100%">
<button id='j-btn'>upload</button>
<script type="text/javascript">
var o_file = document.getElementById('j-file'),
o_btn = document.getElementById('j-btn'),
o_img = document.getElementById('j-img'),
target_file = null;
o_file.addEventListener('change',function(event){ var file = event.target.files[0]; if(!file) return;
target_file = file; var url = window.URL.createObjectURL(target_file); if(/image/.test(target_file.type)){
o_img.setAttribute('src',url);
}else{
console.log('请选择图片');
}
},false);
o_btn.onclick = function(){ if(!target_file) return; //数据处理 var data = new FormData();
data.append('key',target_file);
var xhr = new XMLHttpRequest(); if(xhr.upload){
xhr.upload.addEventListener("progress", function(e){ var loaded = e.loaded; //已经上传大小情况 var tot = e.total; //附件总大小 var per = Math.floor(100*loaded/tot); //已经上传的百分比 console.log(per+'%');//进度 }, false);
}
xhr.onreadystatechange = function(e) { if (xhr.readyState == 4) {if (xhr.status >=200&&xhr.status<300||xhr.status==304) {//上传成功 }
}
};
xhr.onloadend = function(){//无论失败或成功 }
xhr.onerror = function(){
//网络失败 } // 开始上传 xhr.open("POST",'上传地址', true);
xhr.send(data);
} </script>這技術的好處是可以不必把檔案內容讀取到javascript中，而是直接使用檔案內容，速度很快；# （3）如何講圖片資料透過XHR物件傳遞給服務端呢？ new FormData()，為序列化表單以及創建與表單格式相同的資料（XHR傳輸）提供了實現，FormData不必明確在xhr物件上設定請求頭部（如果是表單裡面圖片上傳，enctype需要設定multipart/form -data），XHR能自動識別，實例方法.append(key,value)自訂資料;
#完整的程式碼範例如下：##rrreee### ### ###以上是安卓中HTML5圖片上傳實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
