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

最新推荐文章于 2023-04-27 10:05:43 发布

deshi8958

最新推荐文章于 2023-04-27 10:05:43 发布

阅读量1.3k

点赞数

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/cailijuan/p/9360594.html

版权

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 () {

    });
}


后台

/**
     * 上传文件
     * @param file
     */
    public static void uploadFile(String resourceName, MultipartFile file, String dataUrl){
        String filePath = dataUrl+resourceName+".xls";
        // 保存文件
        File tempSaveFile = new File(filePath);
//        if (tempSaveFile.exists()){
//            tempSaveFile.delete();
//        }
        if (!file.isEmpty()) {
            BufferedOutputStream out;
            try {
                out = new BufferedOutputStream(new FileOutputStream(tempSaveFile));
                out.write(file.getBytes());
                out.flush();
                out.close();
            } catch (FileNotFoundException e) {
                e.printStackTrace();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }