结合两个 KendoUI Jquery 脚本答案

【问题标题】：Combine two KendoUI Jquery scripts结合两个 KendoUI Jquery 脚本
【发布时间】：2018-10-04 17:08:14
【问题描述】：

我想合并这两个脚本。但不能让它工作。我真的在 jquery 部分苦苦挣扎。

这是我正在使用的脚本： https://docs.telerik.com/kendo-ui/controls/editors/upload/how-to/select-additional-metadata

我想将 jQuery 部分添加到该脚本中以使图像预览正常工作： https://docs.telerik.com/kendo-ui/controls/editors/upload/how-to/add-image-preview

        <script>
  $(document).ready(function() {
    $("#files").kendoUpload({
      async: {
        saveUrl: "save",
        removeUrl: "remove",
        autoUpload: false
      },
      multiple: false,
      select: function(e) {
        var fileInfo = e.files[0];
        var wrapper = this.wrapper;

        setTimeout(function(){
          addPreview(fileInfo, wrapper);
        });
      }
    });
  });

  Combine these two--------------------------------------------------------

        <script>
            $(document).ready(function () {
                $("#files").kendoUpload({
                    multiple: true,
                    async: {
                        saveUrl: "save",
                        removeUrl: "remove",
                        autoUpload: false
                    },
                    template: kendo.template($('#fileTemplate').html()),
                    select: onSelect,
                      upload: onUpload
                });
            });

如果有知识的人可以帮助我，那就太好了！ :-)

非常感谢！

【问题讨论】：

你有多个设置为 false 和 true，我不相信你可以在一个脚本中同时拥有这两个

标签： jquery kendo-ui

【解决方案1】：

如果您只想通过预览上传多个文件，请执行以下操作：

$(document).ready(function () {
                    $("#files").kendoUpload({
                        multiple: true,
                        async: {
                            saveUrl: "save",
                            removeUrl: "remove",
                            autoUpload: false
                        },
                        select: onSelect,
                          upload: onUpload
                    });
                });

                function onSelect(e){
                  var upload = this;
                  var files = e.files;

                  var fileInfo = e.files[0];
                  var wrapper = this.wrapper;



                  setTimeout(function(e){
                    addPreview(fileInfo, wrapper);
                  });
                }

              function onUpload(e){
                var upload = this;
                var dropdown = upload.wrapper.find(".k-file[data-uid='" + e.files[0].uid +"'] select").data("kendoDropDownList");

                e.data = {
                    uploader: dropdown.value()
                };
              }

              function addPreview(file, wrapper) {
                var raw = file.rawFile;
                var reader  = new FileReader();

                if (raw) {
                  reader.onloadend = function () {
                    var preview = $("<img class='image-preview'>").attr("src", this.result);

                    wrapper.find(".k-file[data-uid='" + file.uid + "'] .k-file-extension-wrapper")
                      .replaceWith(preview);
                  };

                  reader.readAsDataURL(raw);
                }
              }

【讨论】：

【解决方案2】：

你真是个天才。预览工作正常，但“上传”脚本由于某种原因不再工作。上传按钮停止工作。

【讨论】：