前端js圖片上傳,原理用input type="file"獲取圖片然后把圖片轉換成base64編碼傳到后台.
圖片上傳
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title></title>
</head>
<body>
<!--header-->
<div class="header">
<i class="header-calendar" id="return"></i>
<h3><span>個人資料</span></h3>
</div>
<form>
<ul class="tab-nav">
</ul>
<div class="form-btn">
<input id="files" type="file" onchange="previewImage(this, 'prvid')" >
<div id="prvid" class="prvid"></div>
</div>
</form>
<script>
var user_img; //圖片
//把圖片轉成base64
function previewImage(file, prvid) {
/* file：file控件
* prvid: 圖片預覽容器
*/
var tip = "Expect jpg or png or gif!"; // 設定提示信息
var filters = {
"jpeg": "/9j/4",
"gif": "R0lGOD",
"png": "iVBORw"
}
var prvbox = document.getElementById(prvid);
prvbox.innerHTML = "";
if(window.FileReader) { // html5方案
for(var i = 0, f; f = file.files[i]; i++) {
var fr = new FileReader();
fr.onload = function(e) {
var src = e.target.result;
if(!validateImg(src)) {
//alert(tip);
alert('圖片格式錯誤');
} else {
alert(src);
showPrvImg(src);
}
}
fr.readAsDataURL(f);
}
} else { // 降級處理
if(!/\.jpg$|\.png$|\.gif$/i.test(file.value)) {
//alert(tip);
mui.toast('圖片格式錯誤');
} else {
showPrvImg(file.value);
}
}
function validateImg(data) {
var pos = data.indexOf(",") + 1;
for(var e in filters) {
if(data.indexOf(filters[e]) === pos) {
return e;
}
}
return null;
}
//圖片
function showPrvImg(src) {
var img = document.createElement("img");
img.src = src;
prvbox.appendChild(img);
user_img = src //向后台傳輸的圖片
}
}
</script>
</body>
</html>