1 html
上传预览
<div class="imgInputBox">
<input id='headFile' type="file" class='imgInputBox_imgInput' name='headFile' onchange='getObjectURL(this,"headIcon")'>
<img src="" class='imgInputBox_img' id='headIcon' alt="">
</div>
2 css
/*图片上传按钮*/
.imgInputBox{
position: relative;
overflow: hidden;
height: 150px;
width: 150px;
background-color: #f7f7f7;
}
.imgInputBox .imgInputBox_imgInput{
width: 100%;
height: 100%;
position: absolute;
z-index: 3;
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity: 0;
opacity: 0;
}
.imgInputBox .imgInputBox_img{
display: block;
width: 100%;
height: 100%;
}
3 js
function getObjectURL(objFile,imgId) {
console.log(objFile);
console.log(imgId);
var url = null;
var file=objFile.files[0];
//兼容处理
if (window.createObjectURL != undefined) { // basic
url = window.createObjectURL(file);
} else if (window.URL != undefined) { // mozilla
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) { // webkit
url = window.webkitURL.createObjectURL(file);
}
if(imgId){
document.getElementById(imgId).src=url;
}
// return url;
}