使用jQuery的Ajax上傳檔案

只顯示按鈕，按鈕觸發click事件之後，再觸發input click

HTML部分

<!--實際選擇檔案的 Input Element-->
<input type="file" id="importFile" style="display: none" >
<!--實際顯示的按鈕-->
<button id="importButton" class="btn btn-success float-right">上傳檔案</button>

JS部分

//按鈕點擊時，觸發input click事件
$("#importBtn").click(function(){
   $('#importFile').trigger('click');
});
//選取檔案完畢後的動作
$('#importFile').change(function(){
   let formData = new FormData();
   formData.append('import_file', this.files[0]);
   $.ajax({
       url: "YOUR_API_URL",
       method: 'POST',
       processData: false,
       contentType: false,
       data: formData,
   })
   .done(function(data, textStatus, jqXHR){
       if(data.status !== 'success'){
          alert(data.message);
       }
       dataGrid.refresh(true);
   })
   .fail(function(jqXHR, textStatus, errorThrown ) {
       console.log("status:"+textStatus+" err:"+ errorThrown);
       alert("匯入失敗");
   })
   .always(function(){
   //在done與fail之後執行
   });
});

參考 jQuery官方 與 MDN