Jquery-File-Upload使用表单数据发送附加参数

时间:2017-01-09 17:27:53

标签: jquery asp.net-web-api jquery-file-upload

在我的应用程序中,我使用jquery插件上传多个文件。为了使文件上传并行,我使用以下参数初始化插件。

    $('#fileupload')
        .fileupload({
            multipart: true,
            dataType: "json",
            url: "/api/upload/",
            limitConcurrentUploads: 8,
            sequentialUploads: false,
            progressInterval: 100,
            maxChunkSize: 0,
            add: function(e, data) {
                $('#filelistholder').removeClass('hide');
                data.context = $('<div />').text(data.files[0].name).appendTo('#filelistholder');
                $('</div><div class="progress"><div class="bar" style="width:0%"></div></div>')
                    .appendTo(data.context);
                $('#btnUploadAll')
                    .click(function () {
                        data.submit();
                    });
            },
            done: function(e, data) {
                data.context.text(data.files[0].name + '... Completed');
                $('</div><div class="progress"><div class="bar" style="width:100%"></div></div>')
                    .appendTo(data.context);
            },
            progressall: function(e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                if (progress > 0) console.log("progressall -> "+progress);
                $('#overallbar').css('width', progress + '%');
            },
            progress: function(e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                if (progress > 0) console.log("progress -> " + progress);
                data.context.find('.bar').css('width', progress + '%');
            }
        });

来自扩展程序请求的WebApi操作如下:

    [HttpGet]
    [HttpPost]
    [Route("upload")]
    public HttpResponseMessage Upload()
    {
    ...
    }

我可以轻松地将文件以不同的方式传输到我的api功能。但我也希望使用表单提交功能向WebApi发送其他参数。

我已经改变了我的api功能,如下所示。

    [HttpGet]
    [HttpPost]
    [Route("upload")]
    public HttpResponseMessage Upload([FromBody]int testParam)
    {
     ...
    }

尝试使用jquery从按钮单击发送此功能。

    $('#fileupload')
     .bind('fileuploadsubmit',
         function (e, data) {
             data.formData = { testParam: 1 };
         });

我可以在数据参数中看到表单部分但我无法添加新值并从我的api函数中捕获它。我怎么能这样做?

0 个答案:

没有答案