上传图片可选择水印切换 图片显示宽度自适应
这是我平时写手机端的一个活动项目,在上传图片的时候能选择水印切换,让参与者选择自己喜欢的水印,上传图片后 ,图片显示宽度自适应,这样使图片在设定宽度以内最大的显示图片。让上传者更好的看到效果。
代码如下:
css
.meJoinBox{ width: 100%; min-height: 100vh;position: relative; background: url("../images/meJoinbk.png") center top no-repeat; background-size: 100% 97vh; padding: 5vh 0 17vh;color: #ae8012;font-size: 14px; } .meJoinH{ width: 90% ;margin: 0 auto 4vh;} .meForm{ width: 90%;margin: 0 auto; padding: 0 15px;} .meForm p{line-height: 30px;margin-bottom: 10px;} .meForm p span:first-of-type{display: inline-block; width: 26%; font-weight: bold;} .meForm p .commonIns{ display: inline-block;background: rgba(241,206,124,.7); width: 72%; height: 30px; border: 1px solid #ae8012; float: right;} .meForm p .commonIns input{background: transparent;outline: none; border: none; width: 100%; line-height: 20px; color: #ae8012;height: 30px;padding: 2% 10px; font-size: 14px;} .meForm p .commonIns1{width: 72%; display: block;float: right;background: rgba(241,206,124,.7);border: 1px solid#ae8012;} #meSay{ width: 100%;height: 90px;background: transparent; line-height: 20px;padding: 10px;font-size: 14px;color: #ae8012; border: none; outline: none; } #meSay::-webkit-input-placeholder{color:#ae8012;} .meForm em{opacity: 0;} .imgBox .imgBoxL{ width: 26%;font-weight: bold;} .imgBox .imgBoxR{ width: 72%; } .imgBoxRh li{ width: 32%; float: left; height: 7vh;background: #f1ce7c;border: 1px solid #ae8012;} .imgBoxRh li.on{border: 1px solid #ff6529;} .imgBoxRh li:nth-of-type(2){ margin: 0 2%;} .loadBox{width: 100%;height: auto; background: #f1ce7c ;border: 1px solid #ae8012; margin-top: 10px; position: relative;} .center{text-align: center;margin: 30px 0;} .center img{ width: 40px;} .result span{ display: block; position:absolute; z-index: 999;} .result .sytop{ width: 96%;height: 30px; background: url("../images/sy1.png") center top no-repeat; background-size: 100%; top: 5px; left: 2%;} .result .sybm{ width: 100%;height: 50px; left: 0;bottom: 0;} .result.on1 .sybm{ background: url("../images/sy2.png") center bottom no-repeat;background-size: 100%;} .result.on2 .sybm{ background: url("../images/sy3.png") center bottom no-repeat;background-size: 100%;} .result.on3 .sybm{ background:transparent;} /*显示上传的图片*/ #picShowBox{overflow: hidden;} .result{position: relative; background: #eee; width:100%;float: left;height: auto; overflow: hidden; text-align: center;} .result img{ margin: 0 auto; width:100% ;display: block;} .delete{position: absolute; top:0px;right: 4px; z-index:9999;width: 30px;height: 30px; background: url(../images/delete.png) right 4px no-repeat;background-size: 20px 20px;} .fileIco{width:100%;height:100%; position: absolute; top: 0; left: 0; } .img_b{ width: 48%;position: relative; } .fileInput{ width: 100%;height: 100%; opacity: 0; } .tc{position: relative;width: 100%;text-align: center; z-index: 10;} .imgBox{ margin: 20px 0; } .imgBoxH3{color: #1c8f82;font-size: 14px; font-weight: normal; margin-bottom: 5px;} .imgBoxH3 span{ color: #b2b2b2; line-height: 30px; } #imgBox1_1{ margin:0 auto; } #submit3{ width: 70%; margin: 20px auto 0; }
html
<div class="meJoinBox"> <div class="meJoinH"> <img src="static/images/meJoinH.png" alt=""/> </div> <div class="meForm"> <p><span>姓<em>姓</em><em>名</em>名:</span><span class="commonIns"><input type="text" id="username"/></span></p> <p><span>电<em>电</em><em>话</em>话:</span><span class="commonIns"><input type="tel" id="phone"/></span></p> <p class="clearfix"><span style="vertical-align: top">参赛宣言:</span><span class="commonIns1"><textarea id="meSay" placeholder="请填写参赛宣言,在50字以内。"maxlength="50"></textarea></span></p> <div class="imgBox clearfix"> <div class="imgBoxL fl">上传照片:</div> <div class="imgBoxR fr"> <div> <ul class="imgBoxRh clearfix"> <li><img src="static/images/imgBoxR1.png" alt=""/></li> <li><img src="static/images/imgBoxR2.png" alt=""/></li> <li class="on"><img src="static/images/imgBoxR3.png" alt=""/></li> </ul> <div class="loadBox"> <div class="actGroEwBox" flex="cross:center main:center"> <div class="center"><img src="static/images/add.png" alt=""/></div> <div class="fileIco"> <input type="file" name="actGroupErwei" id="actGroupErwei" class="fileInput"> </div> </div> <div class="tc clearfix" id="picShowBox"></div> </div> </div> </div> </div> <div class="submitBox"><span id="submit"><img src="static/images/submit.png" alt=""/></span></div> </div> </div>
js
function imgUpload(input,picShowBox){ var result; var files = []; // 浏览器支持情况 if(typeof FileReader==='undefined'){ result.innerHTML = "抱歉,你的浏览器不支持 FileReader"; input.setAttribute('disabled','disabled'); }else{ input.addEventListener('change',readFile,false); } // input设置为可以上传多份文件,遍历文件,显示到指定位置 function readFile(){ for(var i=0;i<this.files.length;i++){ var file = this.files[i]; if (!input['value'].match(/.jpg|.gif|.png|.bmp/i)){ //判断上传文件格式 return alert("上传的图片格式不正确,请重新选择") } var reader = new FileReader(); // 将文件读取为 DataURL reader.readAsDataURL(file); files.push(file); window.files = files; // 文件读取成功完成时触发 reader.onload = function(e){ result = '<div class="result" flex="cross:center main:center"><img src="'+this.result+'" alt=""/><i class="delete"></i>' + '<span class="sytop"></span><span class="sybm"></span></div>'; var _index=parseInt($('.imgBoxRh li.on').index()+1); console.log(_index); $('.loadBox .center').hide(); $(picShowBox).append(result); $('.result').removeClass('on1 on2 on3').addClass('on'+_index) } } } $(picShowBox).on('click', '.delete', function(){ $('.loadBox .center').show(); var $parent = $(this).parent(); var index = $parent.index(); $(this).parent().parent().siblings('.actGroEwBox').find('.fileInput').val(""); $parent.remove(); files.splice(index, 1); window.files = files; }); }
window.onload = function() { //input上传图片 var picShowBox = document.getElementById("picShowBox"); //获取显示图片的div元素 var input = document.getElementById("actGroupErwei");//获取选择图片的input元素 var number=1; //最多上传图片的数量 imgUpload(input,picShowBox,number); };