這種方法可以實(shí)現(xiàn)，但是感覺(jué)不是很優(yōu)雅焙格。
<body>
<div>
<div>
<input id="filed" type="file" name="file">
</div>
<div id="img"></div>
<img src="" alt="">
</div>
</body>
<script>
var fileds=document.getElementById('filed');
var showimg=document.getElementById('img');
fileds.addEventListener('change',()=>{
var obj = fileds.files[0]
var windowURL = window.URL || window.webkitURL || window.mozURL;
var imgSrc = windowURL.createObjectURL(obj);
showimg.innerHTML=`
<img src="`+imgSrc+`" alt="">
`
})
</script>
一、調(diào)用FileReader對(duì)象的方法
方法名 參數(shù) 描述
abort none 中斷讀取
readAsBinaryString file 將文件讀取為二進(jìn)制碼
readAsDataURL file 將文件讀取為 DataURL
readAsText file, [encoding] 將文件讀取為文本
readAsText：該方法有兩個(gè)參數(shù)井氢，其中第二個(gè)參數(shù)是文本的編碼方式腾务，默認(rèn)值為 UTF-8。這個(gè)方法非常容易理解驴娃，將文件以文本方式讀取奏候，讀取的結(jié)果即是這個(gè)文本文件中的內(nèi)容。
readAsBinaryString：該方法將文件讀取為二進(jìn)制字符串唇敞，通常我們將它傳送到后端蔗草，后端可以通過(guò)這段字符串存儲(chǔ)文件咒彤。
readAsDataURL：這是例子程序中用到的方法，該方法將文件讀取為一段以 data: 開(kāi)頭的字符串咒精，這段字符串的實(shí)質(zhì)就是 Data URL镶柱，Data URL是一種將小文件直接嵌入文檔的方案。這里的小文件通常是指圖像與 html 等格式的文件模叙。
二歇拆、處理事件
事件 描述
onabort 中斷時(shí)觸發(fā)
onerror 出錯(cuò)時(shí)觸發(fā)
onload 文件讀取成功完成時(shí)觸發(fā)
onloadend 讀取完成觸發(fā)，無(wú)論成功或失敗
onloadstart 讀取開(kāi)始時(shí)觸發(fā)
onprogress 讀取中
三范咨、前端圖片數(shù)據(jù)加載顯示
<progress id="Progress" value="0" max="100"></progress>
<input type="file" name="file" onchange="showPreview(this)" />
<img id="portrait" src="" width="70" height="75">
function showPreview(source) {
var file = source.files[0];
console.log(file);
if(window.FileReader) {
var fr = new FileReader();
fr.onloadend = function(e) {
// console.log(this.result);
document.getElementById("portrait").src = e.target.result;
};
//給FileReader對(duì)象一個(gè)讀取完成的方法,使用readAsDataURL會(huì)返回一個(gè)url,這個(gè)值就保存在事件對(duì)象的result里,img通過(guò)加載這個(gè)地址,完成圖片的加載
fr.readAsDataURL(file);
}
var total = source.files[0].size;
fr.onprogress = function(ev) {
// 簡(jiǎn)單測(cè)試了一下 大概12M左右的傳輸速度
// 推薦測(cè)試的時(shí)候用一個(gè)視頻
console.log(ev.loaded / total);
var loading = (ev.loaded / total)*100;
document.getElementById("Progress").value = loading;
}
}
四故觅、base64與后臺(tái)交互前端代碼
<input type="file" id="upload-file">
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
// 用戶選擇圖片進(jìn)行上傳
// 上傳成功, 后臺(tái)返回圖片的URL
// 顯示在當(dāng)前頁(yè)面上
document.getElementById("upload-file").addEventListener("change", function(){
for (var i = 0; i < this.files.length; i++) {
var file = this.files[i];
var reader = new FileReader();
reader.onload = function (ev) {
console.log(ev);
console.log(ev.target.result);
var base64Str = ev.target.result.split(",")[1];
//console.log(base64Str)
$.ajax({
url: "reImg.php",
data: {
"base64file": base64Str
},
type: "post",
success: function (res) {
createImg(res);
}
})
}
reader.readAsDataURL(file);
}
});
function createImg(imgSrc){
var theImg = document.createElement("img");
theImg.src = imgSrc;
document.body.appendChild(theImg);
theImg.className = "imgC";
}
