项目实战经验分享，素材特效源码定制
<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的语句，需要进行一个又一个的判断
最终效果：
1. 本站所有素材（未指定商用），仅限学习交流请勿用于商业用途。
2. 原创商用和VIP素材，未经合法授权，会员不得以任何形式发布、传播、复制、转售该素材，否则一律封号处理。
3. 如果素材损害你的权益请联系客服vx：13230981129给予处理。
咨询TA
查看(325)次
下载
