SOURCE

//分享设置标题
var put1=document.getElementById("put1");
var div1=document.getElementById("btnr");
put1.onkeyup=function(){
	div1.innerText=put1.value;
}

var put1=document.getElementById("put1");
var btnr2=document.getElementById("btnr2");
put1.onkeyup=function(){
	btnr2.innerText=put1.value;
}

//分享设置描述
var put2=document.getElementById("put2");
var div2=document.getElementById("ljms");
put2.onkeyup=function(){
	div2.innerText=put2.value;
}

function inputChange(picId,imgId,addId,closeId){
    var files = document.getElementById(picId).files; 
    console.log(files);
    
    if(files.length == 0) return; 
    var form = new FormData(), 
        file = files[0];
    form.append('file', file);
    
    var reader = new FileReader();
    reader.readAsDataURL(file); //base64
    //接收到图片时触发onload
    reader.onload = function(e){
        var result = reader.result;
        console.log(result);
        document.getElementById(imgId).src = result;
        document.getElementById(imgId).classList.remove('hide');
        document.getElementById(addId).classList.add('hide');
        document.getElementById(closeId).classList.remove('hide');
    };
}
$(function(){
    $('.close').click(function(){
        $(this).addClass('hide');
        $(this).siblings('.add').removeClass('hide');
        $(this).siblings('img').addClass('hide');
    })
})

<div style="margin: 15px 0px;">
    <span style="display: inline-block; vertical-align: middle; margin-right: 10px;">标题：</span>
    <div class="ivu-input-wrapper ivu-input-wrapper-default ivu-input-type" style="color: rgb(142, 142, 147); width: 500px; margin-left: 15px;">
        <i class="ivu-icon ivu-icon-ios-loading ivu-load-loop ivu-input-icon ivu-input-icon-validate"></i>
        <input id="put1" type="text" placeholder="请输入标题" class="ivu-input ivu-input-default">
        </div>
</div>
<div style="margin: 15px 0px;">
    <span style="display: inline-block; vertical-align: middle; margin-right: 10px;">描述：</span>
    <div class="ivu-input-wrapper ivu-input-wrapper-default ivu-input-type" style="color: rgb(142, 142, 147); width: 500px; margin-left: 15px;">
        <i class="ivu-icon ivu-icon-ios-loading ivu-load-loop ivu-input-icon ivu-input-icon-validate"></i>
        <input id="put2" type="text" placeholder="请输入链接描述" class="ivu-input ivu-input-default">
    </div>
</div>
<div class="qy_right" style="margin-left:200px;">
    <div class="ivu-col ivu-col-span-6" style="text-align: center;left: 55%;margin-top: -85px;">
    <div style="position: relative;">
        <div style="border: 1px solid rgb(229, 229, 234); padding: 15px; display: inline-block; margin: 10px auto; width: 400px; text-align: left;">
        <div style="font-weight: 700; font-size: 14px; margin-bottom: 10px;">聊天窗口样式</div>
        <img src="./image/hetu.png" alt="" style="width: 40px; vertical-align: top; margin-right: 10px;">
        <span class="link-content">
            <div id="btnr" style="color: rgb(34, 34, 34); font-size: 14px; text-overflow: ellipsis; word-break: break-all; white-space: nowrap; width: 100%; overflow: hidden;"></div>
            <div style="position: relative; margin-top: 10px;">
            <span id="ljms" style="width: 180px; font-size: 12px; color: rgb(153, 153, 153); min-height: 40px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; display: -webkit-box;"></span>
            <img src="./image/lianjie.png" alt="">
            </div>
        </span>
        </div>
        <div class="" style="border: 1px solid rgb(229, 229, 234); padding: 15px; display: inline-block; margin: 10px auto; width: 400px; text-align: left;">
        <div style="font-weight: 700; font-size: 14px; margin-bottom: 10px;">朋友圈样式</div>
        <img src="./image/hetu.png" alt="" style="width: 40px; vertical-align: top; margin-right: 10px;">
        <span style="color: rgb(24, 144, 255);">分享小助手</span>
        <span class="link-content1" style="margin-top: 20px;">
            <img src="./image/lianjie.png" alt="">
            <!--<span id="btnr" style="margin-left: 50px; display: -webkit-box; font-size: 14px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; position: absolute; top: 50%; transform: translateY(-50%);"></span>-->
            <span id="btnr2" style="margin-left: 50px; display: -webkit-box; font-size: 14px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; position: absolute; top: 50%; transform: translateY(-50%);"></span>
        </span>
        </div>
    </div>
    </div>
</div>

<div class="qy_left" style="float: left;">
  <div style="font-weight: 700; margin-left: 15px; margin-top: 10px;">微信二维码/公众号二维码/客服号活码：</div>
    <div class="inputBox" style="margin-left: 60px;margin-top: 20px;">
      <i class="close hide" id="close1"></i>
      <input type="file" name="pic" class="fileInput" id="pic1" accept="image/jpg,image/jpeg,image/png" onChange="inputChange('pic1','inputImg1','add1','close1')" />
      <img src="" alt="" id="inputImg1" class="baseImg hide"/>
      <div class="add" id="add1" style="text-align:center;font-size: 40px;color: #888;margin-top: -80px;">+</div>
    </div>
  <div style="color: rgb(145, 145, 145); font-size: 14px; margin-left: 65px;margin-top: 10px;">提示：
    <br>1、上传图片建议尺寸为220*220px
    <br>2、图片大小不能超过2M，支持图片类型jpg、png
    <br>
  </div>
  <div style="margin-top: 30px;margin-left: 60px;border: 2px solid red;width: 100px;height: 100px;">
    <img src="" alt="" id="inputImg1" class="baseImg hide"/>
  </div>
</div>

.hide {display:none !important;}
.close {width:20px;height:20px;position:absolute;right:10px;top:10px;z-index:99;}
.baseImg {width:100px;height:100px;display:inline-block;position:absolute;top:0;left:0;z-index:-1;}
.inputBox {width:100px;height:100px;position:relative;cursor:pointer;border:1px solid #888;}
.fileInput {width:100%;height:100%;opacity:0;cursor:pointer;}