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

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

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

效果

 
                       
         Upload CSV
                   




    

        

            

                ×
                
Upload CSV File
            
            

                

                    

                        

                            *CSV
                        
                        

                            
                                
                                Choose CSV
                            
                            
                        

                    
                    

                        Download Template
                    
                
            
            

                Close
                Upload File
            
        
    

// 初始化
$(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);
        }
    });
}