如何使用 Kendo Uploader 上传文件并使用 ajax 请求？答案

【问题标题】：How to upload a file with Kendo Uploader and using ajax request?如何使用 Kendo Uploader 上传文件并使用 ajax 请求？
【发布时间】：2013-10-25 15:42:16
【问题描述】：

问题：我想向页面添加一个上传控件，但问题是，我看不到如何将它与所有其他控件集成：我不想立即上传文件，但仅允许用户选择它并在按钮上单击使用 javascript 和 ajax 发布请求一次上传所有信息。

更多细节：我有一个网页，其中包含多个输入和一个按钮“保存”。当在 javascript 中单击“保存”时，我会查看输入，将它们放入一个对象中并使用 ajax 请求发送到服务器以进行保存。

有可能吗？我发现的所有示例都基于具有自己的“上传”按钮或异步行为的上传控件。但是，我的情况不同。

将不胜感激任何想法。

【问题讨论】：

标签： javascript ajax asp.net-mvc file-upload kendo-ui

【解决方案1】：

Kendo Upload 支持同步和异步上传模式。检查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>

我定义的地方：

我要验证的复选框，用于决定是否发送表单内容
文件输入字段
一个按钮，单击该按钮将验证表单然后发送它。

现在，上传文件的 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");
    }
});

【讨论】：

【解决方案2】：

我很久以前遇到过同样的问题，并通过将上传的文件存储在会话中直到用户提交来解决这个问题。因为我对文件大小和文件数量有限制，所以对我来说效果很好。但更好的方法是使用 jquery.fileupload 插件。它支持程序化文件上传。

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

【讨论】：

【解决方案3】：

我解决了使用 Kendo UI 同时上传文件和数据的问题：

上传表单.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>

【讨论】：