使用JavaScript和HTML使用Spring進行文件上傳，無需提交按鈕

我有一個引導向導，我要求選擇某個文件進入步驟，並在嚮導中使用它們。所以我把表格放在嚮導的周圍，將所有的步驟信息存儲在裏面。但隨着文件我必須承擔？我想將文件存儲到目錄中（因爲我必須存儲它們）並將路徑保存到表單對象中。這樣對嗎？如果這種方法是正確的，我想使用文件上傳而不提交按鈕，但使用嚮導下一個按鈕。目前，我隱藏了下一個按鈕，並在選擇文件時顯示它，但是如何將文件傳遞給JavaScript和控制器？我可以使用ajax調用控制器，但是如何將窗體關聯到下一個按鈕？因爲我必須使用JavaScript將上傳文件關聯到下一個按鈕。這是我的文件格式（我有一個建議，因爲形式不能使用這個標籤）使用JavaScript和HTML使用Spring進行文件上傳，無需提交按鈕

<div class="tab-pane" id="step3"> 
<p>Select datatable Excel file</p> 
<form class="input-group " method="post" 
    enctype="multipart/form-data" 
    th:action="@{/datatable}" action=""> 
    <div class="input-group"> 
     <span class="input-group-btn"> <span 
      class="btn btn-primary btn-file"> Browse&hellip; 
       <input type="file" name="file" 
       accept=".xls, .xlsx, .xlsm" /> 
     </span> 
     </span> <input id=datatableName" type="text" class="form-control" readonly="readonly"> 
    </div> 
</form>

在javascript中我有

onNext: function(tab, navigation, index) {

，我必須把Ajax調用，但如何檢索文件？

來源

2015-11-04 luca

瞭解AJAX – madalinivascu

的問題不是Ajax調用Web服務，但鏈接文件上傳表單的JavaScript – luca

首先你需要給你id的文件控制（assuning文件控制有file作爲id）。

那就試試這個腳本....

jQuery('#datatableName').click(function(e) { 
    var fileControl = document.getElementById('file'); 
    if(fileControl.files.length == 0){ 
     alert('Send Message: Please Select File'); 
     return false; 
    } 
    var formData = new FormData(); 
    formData.append('file',fileControl.files[0]); 
    jQuery.ajax({ 
     url : 'you_server_side_endpoint', 
     type: 'POST', 
     contentType: false, 
     processData: false, 
     data:formData, 
     success: function(data,status,xhr){ 
      alert('File has been Uploded'); 
     }, 
     error: function(xhr,status,e){ 
      alert('Error'); 
     } 
    }); 
});

但additinally，你需要編寫移動文件腳本在你的網站目錄（PHP move_uploaded_file();功能將幫助你）。

來源

2015-11-04 12:04:01

感謝，我會嘗試，讓你知道 – luca

如果我有一個multple文件，並在我的控制器MultipartFile []我怎樣才能設置formData？ – luca

首先在文件'input'元素中添加'multiple'屬性然後替換爲''''''''''''''' '用
'for（var i = 0; i <（fileControl.files）.length; i ++）{formData.append（'file ['+ i +']'，fileControl.files [i]）; }' –

使用JavaScript和HTML使用Spring進行文件上傳，無需提交按鈕

回答

相關問題