html 導入文件

html
首先用div展現導入按鈕
<div class="uploadbtn"><span class="upchar" onclick="inputFile()">批量導入</span></div>   
設置一個隱藏域，用來導入文件
<input type="file" name="file" id="userImport" style="display: none" onchange="uploadFiles();">
css

.uploadbtn{
    float: right;
    padding:3px;
    border-radius: 5px;
    height: 30px;
    border: 1px solid #169BD5;
    width: 80px;
    margin-right: 20px;
    background-color: #169BD5;
    display: inline-block;
    cursor: pointer;
}
.upchar{
    font-size: 14px;
    color: #fff;
    display: block;
    text-align: center;
}

js
在點擊導入按鈕以後，觸發隱藏域的點擊事件

function inputFile(){
    // 導入模板
    $('#userImport').click();
}
// 導入模板後上傳附件
當隱藏域input獲取焦點後，觸發onchange事件
function uploadFiles(){
    判斷文件是否爲空
    if($('#userImport')[0].files.length==0){return}
    var file = new FormData();
     
    file.append('file', $('#userImport')[0].files[0]);
    //加載層  在文件上傳中出現
    var load_cover =layer.load(0, {
        shade: [0.3,'#fff']
    });
    console.log(file);
    $.ajax({
        url: baseurl+'/project/projectUpload',
        type: 'POST',
        cache: false,
        data: file,
        processData: false,
        contentType: false
    }).done(function(res) {
        if(res.code==0){
            alert(res.msg);
            // layer.alert(res.message);
            //刷新
            jQuery("#list2").trigger("reloadGrid");
        }else{
            alert(res.msg);
        } 
        ajax執行完成，即文件上傳文成，關閉加載層
        layer.close(load_cover);
        //console.log(res);
    }).fail(function(res) {
    ajax執行完成，即文件上傳文成，關閉加載層
       layer.close(load_cover);
        layer.alert(res.message);
    });
}