Question

我正在为我创建的模板上传图片，以便在上传之前显示它。这是代码：

   <script id="fileTemplate" type="text/x-kendo-template">
    <div class='file-wrapper'>
        <h4 class='file-heading file-name-heading'>Name: #=name#</h4>
        <h4 class='file-heading file-description-heading'>Image Heading: <input type="text" id="headingTextbox"/></h4>
    </div>
</script>

如您所见，我在＃= name＃参数中显示图像名称，我想要一些关于图像的信息，因此我使用的是Textbox（id：headingTextbox）。现在，这是我上传图片的代码：

            $("#files").kendoUpload({
            multiple: true,
            async: {
                saveUrl: "SaveSectionImages",
            },
            upload: function (e) {
                e.data = {
                    hdId: $('#hdId').val(),
                    fileDesc: $('#headingTextbox').val()
                };

            },
            complete: onComplete,
            template: kendo.template($('#fileTemplate').html())
        });

现在我的问题是，如果我选择多个图像并且我只获得有关一个图像的信息，那么标题信息会自动附加到所有图像（因为我对所有图像使用相同的文本框ID）。我想要一个途径，我怎么能通过它获得一些信息来实现图像上传？任何帮助都会很明显。谢谢

Answer 1

试试这个：

$("#files").kendoUpload({
      multiple: true,
      async: {
          saveUrl: "SaveSectionImages",
          autoUpload : false
      },
      complete: function(e) {
         var fileList = $("#files").data("kendoUpload").options.files;
         $.each(fileList, function(idx) {			 
           this.fileDesc = $('.headingTextbox')[idx].value;
         });
         console.log($("#files").data("kendoUpload").options.files);
      },
      template: kendo.template($('#fileTemplate').html())
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script id="fileTemplate" type="text/x-kendo-template">
    <div class='file-wrapper'>
        <h4 class='file-heading file-name-heading'>Name: #=name#</h4>
        <h4 class='file-heading file-description-heading'>Image Heading: <input type="text" class="headingTextbox"/></h4>
    </div>
</script>

文件上传包含一些信息

1 个答案: