Question

我想结合这两个脚本。但无法让它发挥作用。我真的在与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
                });
            });

如果有知识的人可以帮助我，那会很棒！： - ）

非常感谢！

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

Answer 2

该死的，你是个天才。预览工作正常但是上传了＃39;脚本由于某种原因不再起作用。上传按钮停止工作。

结合两个KendoUI Jquery脚本

2 个答案: