第一步写入input
.uploadWrap{
font-size: 14px;
line-height: 24px;
cursor: pointer;
height: 36px;
width: 118px;
margin-right: 6px;
margin-left: 28px;
position: relative;
}
.ph08{
opacity: 0; //如果自定义上传按钮一般都会这样设置
height: 36px;
width: 118px;
position: absolute;
top: 0;
left: 0;
}
<div class="poster" id="poster"> </div>//图片显示dom
<button class="uploadWrap defaultBtn_low_short_noBg">
<input type="file" name="file0" id="file0" multiple="" class="ph08">
上传海报
</button>
第二步js获取上传图片路径
//处理图片路径
function getObjectURL(file) {
var url = null;
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;
}
$("#file0").change(function(){
if (this.files && this.files[0]){
var filePath = $('#file0').val().toLowerCase().split(".");
var fileType = filePath[filePath.length - 1]; //获取图片格式
if(fileType=='zip'||fileType=='rar'||fileType=='html'){
alert("请上传图片格式");
return false;
}
var objUrl = getObjectURL(this.files[0]);
if(objUrl){
console.log(objUrl);
$("#poster").css("background-image","url("+objUrl+")");
$("#file0").click(function(e){
$("#poster").css("background-image","url("+objUrl+")");
})
}
}
})
这样获取到图片路径直接放入到你想要显示的dom就可以
效果.png
网友评论