实现上传文件但隐藏选择文件的文字

Posted 2020-12-25 cailijuan

html代码:

<span tabindex="0" class="ant-upload" role="button">
                    <input type="file" accept="" style="display: none;" id="clueImgInput" onchange="uploadClueImg()">
                    <a href="javascript:void(0)" id="clueImgUploadButton" class="btn-normal">
                        <span>上传图片</span>
                    </a>?
                </span>

js触发点击选择文件代码:

$("#clueImgUploadButton").click(function () {
        $("#clueImgInput").click();
    });

上传的请求:

function uploadClueImg() {
    var file_obj = document.getElementById(‘clueImgInput‘).files[0];
    var fd = new FormData();
    fd.append(‘file‘, file_obj);
    $.ajax({
        type: ‘post‘,
        url: "uploadClueImg",
        data: fd,
        cache: false,
        processData: false,
        contentType: false,
    }).success(function (data) {
        if (data.code === 107){
            //上传成功
            var url = data.data;
            $(".add-picture-win img").attr(‘src‘,‘‘);
            $(".add-picture-win img").attr(‘src‘,url);
        }
    }).error(function () {

    });
}

 

 

$("#clueImgUploadButton").click(function () {
    $("#clueImgInput").click();
});