Javascript 如何使用Kendo Uploader和ajax请求上传文件？

问题：我想向页面添加一个上载控件，但问题是，我不知道如何将其与所有其他控件集成：我不想立即上载文件，只允许用户选择它，然后单击按钮，使用javascript和ajax post请求一次上载所有信息

再详细一点：我有一个网页，有许多输入和一个保存按钮。 在javascript中单击Save时，我检查输入，将它们放入一个对象中，并将ajax请求发送到要保存的服务器

有可能吗？我发现的所有示例都基于上载控件，该控件有自己的按钮“Upload”或异步运行。然而，我的情况不同

---

如果有任何想法，我将不胜感激。

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

---

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

---

剑道上传支持同步和异步上传模式。检查

因此，您可以使用如下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>

因为我不是说它是

异步的

，默认情况下它是

同步的

：

以及验证表单的功能：

$("#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");
    }
});

---

剑道上传支持同步和异步上传模式。检查

因此，您可以使用如下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>

因为我不是说它是

异步的

，默认情况下它是

同步的

：

以及验证表单的功能：

$("#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");
    }
});

---

我使用剑道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>

努梅罗：
阿奇沃：
$（文档）.ready（函数（）{
$（“form#formLic”）.submit（函数（）{
var formData=新formData（$（此）[0]）；
$.ajax({
url:“nuevo/uploadInsert.php”，
键入：“POST”，
数据：formData，
async:false，
cache:false，
contentType:false，
processData:false，
成功：功能（结果）{
警报（结果）；
}
});
返回false；
});
});

我使用剑道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>

努梅罗：
阿奇沃：
$（文档）.ready（函数（）{
$（“form#formLic”）.submit（函数（）{
var formData=新formData（$（此）[0]）；
$.ajax({
url:“nuevo/uploadInsert.php”，
键入：“POST”，
数据：formData，
async:false，
cache:false，
contentType:false，
processData:false，
成功：功能（结果）{
警报（结果）；
}
});
返回false；
});
});