前端js图片上传
前端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>
