如何使用 Kendo File Upload 发送额外的值答案

【问题标题】：How to send extra values with Kendo File Upload如何使用 Kendo File Upload 发送额外的值
【发布时间】：2014-02-05 06:55:42
【问题描述】：

我正在尝试上传文件并且文件上传正在成功上传。当我发送额外的值以及文件上传保存 url 时，我遇到了问题。

我已经创建了一个 jsfiddle

Jsfiddle Example Link 我可以上传文件，但我想将下拉值和文本框值与文件上传一起发送。

    <span>Document Type
<select id="dropdownlist">
    <option>Id Proof</option>
    <option>Driving Liscence</option>
    <option>Other</option>
</select>
    <br/>
    Doc Number<input type="text" class="k-text" />
    <br/>
<div style="padding: 4px; margin-bottom: 10px;">
        Acceptable file types: .xml<br/>File size limit: 5MB
 </div>
    <input type="file" name="batchFile" id="batchFile" title="Select file" />
    <div id="upload-error" class="k-state-selected" style="padding: 4px; margin-top: 10px; display: none"></div>

<script>
$("#dropdownlist").kendoDropDownList();


$("#batchFile").kendoUpload({
    async: {
        saveUrl: '/Upload',
        autoUpload: false
    },
    multiple: false,
    localization: {
        select: "Select a file",
        uploadSelectedFiles: "Send"
    }
});
</script>

【问题讨论】：

标签： javascript jquery kendo-ui kendo-grid

【解决方案1】：

我已更新您的 JSFiddle 以发布其他字段。

http://jsfiddle.net/dtrimarchi/bWs9j/61/

upload: function (e) {
    e.data = { dropdownlist: $("#dropdownlist").val(), docnumber: $("#docnumber").val() };
}

【讨论】：

感谢达里奥，我能够在上传 url 中发送额外数据并在我的控制器中获取这些值。但文件即将为空。

【解决方案2】：

您看过upload 事件处理程序了吗？看起来这会做你可能需要发送额外数据的事情，他们的例子是添加一个请求头。

http://docs.telerik.com/kendo-ui/api/web/upload#events-upload

【讨论】：

是的，我已经阅读了文档。但我不知道在 url 中附加值。

【解决方案3】：

我设法修改了上传功能中的保存网址，如下所示：

上传：函数（e）{ e.sender.options.async.saveUrl = e.sender.options.async.saveUrl + "/" + e.files[0].name; }

我总是上传一个文件，并在 URL 中发送它的名称。异步配置为：

异步：{ withCredentials：真， saveUrl: "保存服务的 URL", }

【讨论】：

【解决方案4】：

API 控制器端public async Task<ApiResponseAdmin> Upload(ICollection<IFormFile>addfiles, [FromForm] string KeyValue) UI Kendo $("#xyz").kendoUpload({ multiple: true, async: { saveUrl: API_UploadFile, //removeUrl: "remove", autoUpload: false }, upload: onUpload, validation: { allowedExtensions: [".gif", ".jpg", ".png", ".jpeg"] }, }); function onUpload(e) { var keyInput = $("#Id").val(); if (keyInput != null) { e.formData = new FormData(); e.formData.append("KeyValue", keyInput); }

【讨论】：

【解决方案5】：

这是我用过的一个例子：

upload: function onUpload(e) {

 $.each(e.files, function (index, value) {
var fileName = value.name;

 e.sender.options.async.saveUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('List A')/items(2)/AttachmentFiles/add('" + fileName + "')"

      });
    },

【讨论】：