预览功能:input[type=file]的onchange事件
JS部分
预览效果
要做到预览本地图片,最重要的就是获取到文件的路径。
var clear = document.getElementById('clear_img');
var img = document.getElementById('preview'); //img
var file = document.getElementById('upload_img'); //input
获取文件路径
file.onchange = function() {
console.log(getObjectUrl(this.files[0]));
var src = getObjectUrl(this.files[0]);
img.src = src;
}
function getObjectUrl(file) {
var url = null;
if(window.createObjectURL != undefined) {
url = window.createObjectURL(file);
}
else if(window.URL != undefined) {
url = window.URL.createObjectURL(file);
}
else if(window.webkitURL != undefined) {
url = window.webkitURL.createObjectURL(file);
}
return url;
}
取消预览
即使file的value=null;
clear.onclick = function() {
img.src = "";
file.value = null;
}
HTML
<div id="preview_fake" style="position:absolute;left:640px;top:150px">
<img id="preview" onload="onPreviewLoad(this)" width="140" height="140"/>
<div class="img-btn">
<a href="javascript:;" class="a-upload ">选择文件
<input id="upload_img" type="file" onchange="onUploadImgChange(this)"/></a>
<a href="javascript:;" class="a-clear ">取消
<input id="clear_img" type="button" value="取消" onclick="" /></a>
</div>
</div>
input file样式美化
就是在input外面用a标签封装起来,然后将我们想要的样式写在a标签上,用a标签来覆盖掉原本的input(opacity:0)所在的位置。
.img-btn {
margin-top: 10px;
color: #ffffff;
}
.a-clear {
position: relative;
display: inline-block;
background: #61A3E1;
border-radius: 4px;
padding: 4px 12px;
overflow: hidden;
text-decoration: none;
text-indent: 0;
line-height: 20px;
}
.a-clear input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
}
.a-upload {
position: relative;
display: inline-block;
background: #61A3E1;
border-radius: 4px;
padding: 4px 12px;
overflow: hidden;
text-decoration: none;
text-indent: 0;
line-height: 20px;
}
.a-upload input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
}
记录一下自己这次使用的一个功能吧,写前觉得懵逼写后觉得根本没啥好写的。。希望能找到一个更好的方法,然后去做一下缩略图的功能(即图片等比例缩放)~