前端图片上传加本地预览功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
.ge_pic_icon_Infor{
width: 200px;
height: 200px;
position: relative;
border: 1px solid #ccc;
}
.preview{
position: absolute;
top:50%;
left:50%;
width:100%;
transform:translate(-50%,-50%);
text-align: center;
}
</style>
</head>
<body>
<div class="ge_pic_icon_Infor">
<img src="" />
</div>
<div class="Infor_file">
<input
type="file"
name="uploadPicture"
id="file"
value=""
title="上传照片"
onchange="getPhoto(this)"
/>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
var imgurl = "";
function getPhoto(node) {
var imgURL = "";
try {
var file = null;
if (node.files && node.files[0]) {
file = node.files[0];
} else if (node.files && node.files.item(0)) {
file = node.files.item(0);
}
//Firefox 因安全性问题已无法直接通过input[file].value 获取完整的文件路径
try {
imgURL = file.getAsDataURL();
} catch (e) {
imgRUL = window.URL.createObjectURL(file);
}
} catch (e) {
if (node.files && node.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
imgURL = e.target.result;
};
reader.readAsDataURL(node.files[0]);
}
}
creatImg(imgRUL);
return imgURL;
}
function creatImg(imgRUL) {
var textHtml =
"<img src='" + imgRUL + "' class='preview'/>";
$(".ge_pic_icon_Infor").html(textHtml);
}
</script>
</body>
</html>
