1

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

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

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

将不胜感激任何想法。

4

3 回答 3

3

Kendo Upload 支持同步和异步上传模式。检查这篇文章。

所以你可以有一个这样的 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");
    }
});
于 2013-10-17T11:41:48.730 回答
1

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

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

于 2013-10-17T08:55:46.400 回答
0

我使用 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>
于 2015-01-09T17:15:09.393 回答