Question

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

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

有可能这样做吗？我发现的所有示例都基于上传控件，它有自己的按钮＆＃34;上传＆＃34;或表现异步。但是，我的情况有所不同。

对任何想法都会感激不尽。

Answer 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");
    }
});

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>

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

3 个答案: