王永康<div class="img-box jiaoao1" id="imgPreview" >
<img src="img/jiahao.png" >
<input id="file" class="filesone" type="file" accept="image/*" >
<p>选择图片p>
div>
<div class="btn-box">
<button type="button">立即提交button>
div>对应的页面效果是：
JQ代码$('.filestow').on('change',function(){
var c_showImg =this.files[0];
getObjectURLsss(c_showImg);
console.log(123)
})
function getObjectURLsss(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);
}
// $('.jiaoao2').css("width","187px")
$('.jiaoao2').css("border","1px solid black");
$('.jiaoao2').css("margin-right","30px");
$('.jiaoao2').css("background-image","url("+url+")");
$('.jiaoao2').css("background-size","100% 100%")
return url;
我这里使用的是更改这个框的样式 ，也就是背景图，用了很多创建URL的语句，需要进行一个又一个的判断
最终效果：
0
联系我
0条评论