上传图片可选择水印切换 图片显示宽度自适应

上传图片可选择水印切换  图片显示宽度自适应

  这是我平时写手机端的一个活动项目，在上传图片的时候能选择水印切换，让参与者选择自己喜欢的水印，上传图片后 ，图片显示宽度自适应，这样使图片在设定宽度以内最大的显示图片。让上传者更好的看到效果。

代码如下：

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);
};