HTML JS 自定义input文件上传 file的提示文字及样式,Html+js+bootstrap+SpringBoot 实现 ajax文件上传和下载

HTML JS 自定义input文件上传 file的提示文字及样式

我这边找了许久，没有发现直接修改 <input type="file">的操作，于是我这边就将 <input type="file"> 进行隐藏，新增一个按钮<button> 用于展示按钮内容和<span>来展示选择的文件,来！上代码

效果如下：

未选择文件

选择文件后

HTML 代码

我这边是结合Bootstrap来写的

   <div class="row">
       <div class="col-md-6">
           <div class="col-md-2">
               <label for="cvsFile">*CSV</label>
           </div>
           <div class="col-md-10">
               <!-- 用于展示按钮文案 -->
               <button class="btn btn-info" id="cvsFileBtn">
                   <span class="glyphicon glyphicon-cloud-upload"></span>
                   Choose CSV</button>
               <!-- 用于展示选择的文件名称 -->
               <span id="cvsFileText"></span>
               <!-- 隐藏input file文件选择器 -->
               <input type="file" style="width: 350px" name="cvsFile" id="cvsFile"
                      accept=".csv" hidden/>
           </div>

       </div>
       <div class="col-md-6">
           <a id="downloadTemplateBtn">Download Template</a>
       </div>
   </div>

Js代码

	// 点击按钮触发input file文件选择器 点击事件
    $("#cvsFileBtn").on('click', function () {
        $("#cvsFile").trigger('click');
    });
    
    // 选择文件产生change事件，则span则获取file文件选择器的值
    $("#cvsFile").on('change', function () {
        $("#cvsFileText").html($("#cvsFile").val());
    });

Html+js+bootstrap+SpringBoot 实现 ajax文件上传和下载

html+js+bootstrap 实现 ajax文件上传

效果

html代码

<!-- 点击上传按钮 用于弹出模态窗 -->
<div class="row">
 <button class="btn btn-info" id="uploadCSVBtn">
                       <span class="glyphicon glyphicon-cloud-upload"></span>
         Upload CSV</button>
                   <span id="cvsFileText"></span>
</div>

<!-- 弹出模态窗 -->
<div class="modal fade" tabindex="-1" role="dialog" id="uploadModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Upload CSV File</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="col-md-2">
                            <label for="cvsFile">*CSV</label>
                        </div>
                        <div class="col-md-10">
                            <button class="btn btn-info" id="cvsFileBtn">
                                <span class="glyphicon glyphicon-cloud-upload"></span>
                                Choose CSV</button>
                            <span id="cvsFileText"></span>
                            <input type="file" style="width: 350px" name="cvsFile" id="cvsFile"
                                   accept=".csv" hidden/>
                        </div>

                    </div>
                    <div class="col-md-6">
                        <a id="downloadTemplateBtn">Download Template</a>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" id="uploadFileBtn" class="btn btn-primary">Upload File</button>
            </div>
        </div>
    </div>
</div>

js

// 初始化
$(function () {

	// 点击上传按钮弹出模态窗事件
    $('#uploadCSVBtn').click(function () {
          $("#cvsFile").val('');
          $("#cvsFileText").html('');
          $('#uploadModal').modal('toggle');
    });
    
    $("#uploadFileBtn").on('click', function () {
        uploadCVSFile();
    })

    $("#downloadTemplateBtn").on('click', function () {
        let status = confirm("Download CSV Import Template?");
        if (!status) {
            return false;
        }
        downloadTemplate();
    })

    $("#cvsFileBtn").on('click', function () {
        $("#cvsFile").trigger('click');
    })
    $("#cvsFile").on('change', function () {
        $("#cvsFileText").html($("#cvsFile").val());
    })

});

//上传
function uploadCVSFile(){
    var cvsFile = $("#cvsFile")[0].files[0];
    if (isEmpty(cvsFile)) {
        bootbox.alert("The upload File Must be not empty!");
        return false;
    }
    if (!/.(csv)$/.test($("#cvsFile").val())) {
        bootbox.alert("The upload File Type Must be Csv!");
        return false;
    }
    var formdata = new FormData();
    formdata.append('file', cvsFile);
    $.ajax({
        url: 'url',
        type: 'post',
        data: formdata,
        cache: false,
        processData: false,
        contentType: false,
        async: false,
        success: function (data) {
            bootbox.alert('Upload cvs file success!');
        },
        error: function (data) {
            let msg = 'Upload 系统错误！';
            if (!isEmpty(data.responseText)){
                msg = data.responseText;
            }else if (!isEmpty(data.statusText)){
                msg = data.statusText;
            }
            bootbox.alert('Upload cvs file failure ==> ' + msg);
        }
    });
}


// 下载模板
function downloadTemplate(){

    $.ajax({
        url: '/file/downloadTemplate',
        type: 'get',
        contentType: 'application/json',
        success: function (data) {
            if (data === undefined || data === null) {
                return;
            }
            window.location.href = "/file/download?fileName=" + encodeURI(data);
        },
        error: function (data) {
            let msg = 'Download CSV Template 系统错误！';
            if (!isEmpty(data.responseText)){
                msg = data.responseText;
            }else if (!isEmpty(data.statusText)){
                msg = data.statusText;
            }
            bootbox.alert('Download CSV Template failure ==> ' + msg);
        }
    });
}

java 后端代码我就不写了，有需要评论起来，我后期加上