zoukankan      html  css  js  c++  java
  • 实现上传文件但隐藏选择文件的文字

    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();
                }
            }
        }
  • 相关阅读:
    Navicat 连接MySQL 8.0.11 出现2059错误
    安全技术运营的心得
    浅谈命令混淆
    2021年度总结与2022新的展望
    域环境搭建之安装exchange
    内网ADCS攻防
    CVE202142287复现
    企业安全建设——安全防线框架建设(一)
    frp_v0.37.1内网穿透,内网服务公网用不求人
    WP7XNA 多点触摸
  • 原文地址:https://www.cnblogs.com/cailijuan/p/9360594.html
Copyright © 2011-2022 走看看