七牛云前端上传图片，去除默认的input file样式

效果演示

主要代码

<div class="col-xs-6" align="center">
    <a href="javascript:void(0);" onclick="chooseImg(this, 'tx');" class="info-image">
        <img id="img-tx"
             src="{{.user.HeadImg}}"
             class="img-rounded" width="120" height="120"><span>修改头像</span>
    </a>
</div>
<div class="col-xs-6" align="center">
	这里是真正的显示样式
    <a href="javascript:void(0);" onclick="chooseImg(this, 'ewm');" class="info-image">
        <img id="img-ewm" src="/home/views/zx99_wx/images/wx_2.gif" class="img-rounded custom-qrcode"
             width="120" height="120"><span>上传二维码</span>
    </a>
</div>
{{/*隐藏的表单input file,只用来接收值，但是不显示*/}}
<input type="file" id="upfile" style="display: none"/>
<script>
    function up_success(type , key) {
        var cdn_domain = '{{.cdn_domain}}'
        if (type == 'tx') {
            document.getElementById('img-tx').src= cdn_domain+"/"+key
        } else {
            document.getElementById('img-ewm').src= cdn_domain+"/"+key
        }
        //清空input file的value，否则会多次触发 input file 的 onchange
        var fileValue = document.getElementById('upfile')
        fileValue.outerHTML = fileValue.outerHTML//清空input file 的值，不能直接设置value，会报错
    }

    function up_error() {
        layer.open({content: '上传错误，请重试'})
    }
    function chooseImg(c,type){
        console.log(type)
        $('#upfile').click()
        $('#upfile').on('change',function(){
            var headImg = document.getElementById("upfile");
            if(headImg.files.length>0){
                console.log("调用1次")
                uploadFileToQiniu(headImg.files[0] ,type)
            }
        })
    }

    function uploadFileToQiniu(fileR ,type) {
        //var fileResult = document.getElementById("file").files[0];
        var token = "{{.token}}"//这里是后端计算出的七牛云上传token
        var filename = new Date().getTime() + "_" + fileR.name
        var observable = qiniu.upload(fileR, `haoduofang/head_img/` + filename, token, {}, {})
        // const subscription = observable.subscribe(observer) // 上传开始
        // or
        var subscription = observable.subscribe(function (res) {
            console.log("next ", res)
        }, function (err) {
            console.log("err ", err)
            up_error()
        }, function (res) {
            console.log("complete ", res)
            if (res.key) {
                up_success(type , res.key)
            }else{
                up_error()
            }
        }) // 这样传参形式也可以
        // subscription.unsubscribe() // 上传取消
    }
</script>