這種方法可以實現(xiàn)，但是感覺不是很優(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對象的方法
方法名 參數(shù) 描述
abort none 中斷讀取
readAsBinaryString file 將文件讀取為二進制碼
readAsDataURL file 將文件讀取為 DataURL
readAsText file, [encoding] 將文件讀取為文本
readAsText：該方法有兩個參數(shù)，其中第二個參數(shù)是文本的編碼方式，默認值為 UTF-8。這個方法非常容易理解，將文件以文本方式讀取，讀取的結(jié)果即是這個文本文件中的內(nèi)容。
readAsBinaryString：該方法將文件讀取為二進制字符串，通常我們將它傳送到后端，后端可以通過這段字符串存儲文件。
readAsDataURL：這是例子程序中用到的方法，該方法將文件讀取為一段以 data: 開頭的字符串，這段字符串的實質(zhì)就是 Data URL，Data URL是一種將小文件直接嵌入文檔的方案。這里的小文件通常是指圖像與 html 等格式的文件。
二、處理事件
事件 描述
onabort 中斷時觸發(fā)
onerror 出錯時觸發(fā)
onload 文件讀取成功完成時觸發(fā)
onloadend 讀取完成觸發(fā)，無論成功或失敗
onloadstart 讀取開始時觸發(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對象一個讀取完成的方法,使用readAsDataURL會返回一個url,這個值就保存在事件對象的result里,img通過加載這個地址,完成圖片的加載
fr.readAsDataURL(file);
}
var total = source.files[0].size;
fr.onprogress = function(ev) {
// 簡單測試了一下 大概12M左右的傳輸速度
// 推薦測試的時候用一個視頻
console.log(ev.loaded / total);
var loading = (ev.loaded / total)*100;
document.getElementById("Progress").value = loading;
}
}
四、base64與后臺交互前端代碼
<input type="file" id="upload-file">
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
// 用戶選擇圖片進行上傳
// 上傳成功, 后臺返回圖片的URL
// 顯示在當前頁面上
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";
}
