划水摸鱼的时候研究了JS图片的上传预览，分别是FileReader()、createObjectURL()，在此分享一下！
效果图：
图片上传预览
点击放大按钮
/********** 引用的CSS **********/
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
/********** CSS **********/
<style>
*{
padding: 0;
margin: 0;
}
.imgDiv{
margin: 20px 0 0 20px;
width: 300px;
height: 200px;
border: 1px solid #666;
}
.imgDiv:hover{
background-color: #F6F6F8;
}
#upImage{
position: absolute;
top: 20px;
left: 20px;
opacity: 0;
cursor: pointer !important;
width: 300px;
height: 200px;
opacity: 0;
}
.memo{
text-align: center;
margin-top: 70px;
}
.memo>p{
line-height: 20px;
}
.memo .plus{
font-size: 40px;
color: #666;
text-align: center;
}
.memo .upText{
text-align: center;
}
.preview{
text-align: center;
}
.preview img{
height: 198px;
}
.otherIcon{
position: absolute;
z-index: 10;
left: 274.5px;
top: 20.5px;
cursor: pointer;
}
.otherIcon .conIcon{
padding: 2px;
background-color: #808080;
opacity: 0.8;
color: white;
font-size: 16px;
width: 20px;
height: 20px;
}
.otherIcon .conIcon:hover{
opacity: 1;
}
</style>
/********** HTML **********/
<div class="imgDiv">
<div class="memo">
<p class="plus">+</p>
<p class="upText">点击上传图片</p>
</div>
<input type="file" id="upImage" onchange="changeImg(this)" accept="image/*">
</div>
/********** 引用的JS **********/
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
FileReader()：
/****** FileReader方法 ******/
function upImage(){
var fr = new FileReader();
var imgFile = document.getElementById("upImage").files[0];
if (imgFile.size > 1024 * 500 * 1){
return alert("上传图片不能超过500KB");
}
if (imgFile.type != "image/png" && imgFile.type != "image/jpeg" && imgFile.type != "image/gif"){
return alert("上传图片格式不正确");
}
fr.readAsDataURL(imgFile);
fr.onload = function(){
$(".imgDiv").html(
'<div class="preview"><img id="imgPreview" src="' + this.result + '" alt=""></div>' +
'<div class="otherIcon" style="display:none">' +
'<span class="glyphicon glyphicon-remove conIcon" onclick="delIcon()" title="删除图片"></span>' +
'<span> </span>' +
'<span class="glyphicon glyphicon-zoom-in conIcon" onclick="magnifyIcon()" title="放大图片"></span>' +
'</div>'
)
$(".imgDiv").after(
'<div class="modal fade" id="magnifyModal" tabindex="-1" role="dialog">' +
'<div class="modal-dialog modal-lg" role="document">' +
'<div class="modal-content"></div>' +
'</div>' +
'</div>'
);
}
}
createObjectURL()：
/***** createObjectURL方法 *****/
function changeImg(obj) {
var imgSize = obj.files[0].size;
if (imgSize > 1024 * 500 * 1) {
return alert("上传图片不能超过500KB");
};
if (obj.files[0].type != 'image/png' && obj.files[0].type != 'image/jpeg' && obj.files[0].type != 'image/gif') {
return alert("上传图片格式不正确");
};
var imgSrc = getObjectURL(obj.files[0]);
$(".imgDiv").html(
'<div class="preview"><img id="imgPreview" src="' + imgSrc + '" alt=""></div>' +
'<div class="otherIcon" style="display:none">' +
'<span class="glyphicon glyphicon-remove conIcon" onclick="delIcon()" title="删除图片"></span>' +
'<span> </span>' +
'<span class="glyphicon glyphicon-zoom-in conIcon" onclick="magnifyIcon()" title="放大图片"></span>' +
'</div>'
);
$(".imgDiv").after(
'<div class="modal fade" id="magnifyModal" tabindex="-1" role="dialog">' +
'<div class="modal-dialog modal-lg" role="document">' +
'<div class="modal-content"></div>' +
'</div>' +
'</div>'
);
}
//建立可存取到该file的url
function getObjectURL(file) {
var url = null;
//下面函数执行效果是一样的，只是针对不同的浏览器执行不同的js函数而已
if (window.createObjectURL != undefined) { //basic
url = window.createObjectURL(file);
} else if (window.URL != undefined) { //mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) { //webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
}
其他所需方法：
//鼠标hover显示删除和放大图片
$(function () {
$(".imgDiv").mouseenter(function () {
$(".otherIcon").css("display", "block");
})
$(".imgDiv").mouseleave(function () {
$(".otherIcon").css("display", "none");
})
})
//删除图片
function delIcon() {
$(".imgDiv").html(
'<div class="memo">' +
'<p class="plus">+</p>' +
'<p class="upText">点击上传图片</p>' +
'</div>' +
'<input type="file" id="upImage" onchange="upImage()" accept="image/*">'
);
$("#magnifyModal").remove();
}
//放大图片
function magnifyIcon() {
var magnifyImgSrc = document.getElementById('imgPreview').src;
$("#magnifyModal .modal-content").html('<div style="text-align:center"><img style="height:500px" src="' + magnifyImgSrc + '" alt=""><div>');
$("#magnifyModal").modal("show");
}
对比：
| 名称 | FileReader | createObjectURL |
|---|---|---|
| 兼容性 | IE10及以上 | IE10及以上 |
| 执行机制 | 异步执行（宏任务 - 回调方式） | 同步执行 |
| 返回值 | 获取一段data:base64的字符串 | 获取当前文件的一个内存URL |
| 内存使用 | FileReader.readAsDataURL返回文件的base64字符串，比blob url消耗更多内存，但是在不用的时候会自动从内存中清除（通过垃圾回收机制） | createObjectURL返回一段带hash的url，并且一直存储在内存中，直到document触发了unload事件（例如：document close）或者执行revokeObjectURL来释放 |
| 使用场景 | 如果不太在意设备性能问题，并想获取图片的base64，则推荐使用FileReader.readAsDataURL | 使用createObjectURL可以节省性能并更快速，只不过需要在不使用的情况下手动释放内存 |
总结：FileReader()和createObjectURL()均不支持IE10以下的浏览器，从性能优化角度来说，createObjectURL()可能相对较好
网友评论