如何使用Kendo上傳器上傳文件並使用Ajax請求？

Question

問題：我想向頁面添加一個Upload控件，但問題是，我沒有看到如何將它與所有其他控件集成：我不想立即上傳文件，但只允許用戶選擇它，並在按鈕上點擊使用javascript和ajax發送請求一次性上傳所有信息。

更多的細節：我有一個網頁有一些輸入和一個按鈕保存。 在JavaScript中單擊保存時，我會查看輸入，將它們放入一個對象中，並使用ajax請求發送到要保存的服務器。

有沒有可能這樣做？我發現的所有例子都基於上傳控件，它有自己的按鈕「上傳」或異步行爲。但是，我的情況是不同的。

將不勝感激的任何想法。

Answer 1

劍道上傳同時支持同步和異步上傳模式。檢查this post。

所以，你可以有一個HTML表單是這樣的：

<form method="post" id="form" action="update.php"> 
    <label for="control">Control: <input id="control" class="k-checkbox" type="checkbox"/></label> 
    <input name="photos" id="photos" type="file"/> 
    <input id="send" class="k-button" type="button" value="Save"/> 
</form> 

哪裏定義：

1. ，我要去驗證來決定發送或不的內容的複選框表格
2. 文件輸入字段
3. 一個按鈕，單擊後將驗證表單併發送它。

現在的JavaScript文件上傳：

$("#photos").kendoUpload({ 
    multiple: false 
}); 

由於我並不是說這是asynchronous是synchronous默認：

以及驗證表單功能：

$("#send").on("click", function (e) { 
    // Check that Checkbox is ticked 
    var ctl = $("#control").is(":checked"); 
    if (ctl) { 
     // if so, send the form 
     $("#form").submit(); 
    } else { 
     // otherwise show an alert 
     alert("Please check 'control' before sending"); 
    } 
}); 

Answer 2

很久以前，我遇到了同樣的問題，並通過將上傳的文件存儲在會話中直到用戶提交來解決此問題。因爲我對文件大小和文件數量有限制，所以對我來說非常合適。但更好的方法是使用jquery.fileupload插件。它支持程序化文件上傳。

https://github.com/blueimp/jQuery-File-Upload/wiki/API#programmatic-file-upload

Answer 3

我使用Kendo UI同時解決了上傳文件和數據：

uploadForm.php

<form method="POST" id="formLic" name="formLic" enctype="multipart/form-data"> 
    <label for="lnumero">Número: </label> 
    <input type="text" id="lnumero" class="k-textbox"/> 
    <label for="larchivo">Archivo: </label> 
    <?php 
     $upload = new \Kendo\UI\Upload('larchivo'); 
     $localization = new \Kendo\UI\UploadLocalization(); 
     $localization->select('Examinar...'); 
     $upload->showFileList(true) 
     ->multiple(false) 
     ->localization($localization) 
     ->attr('name','larchivo[]'); 
     echo $upload->render(); 
    ?> 
</form> 
<script> 
     $(document).ready(function() { 
     $("form#formLic").submit(function(){ 
      var formData = new FormData($(this)[0]); 
      $.ajax({ 
       url: "nuevo/uploadInsert.php", 
       type: 'POST', 
       data: formData, 
       async: false, 
       cache: false, 
       contentType: false, 
       processData: false, 
       success: function (result) { 
        alert(result); 
       } 
      }); 
      return false; 
     }); 
    }); 
</script>