Question

我正在使用blueimp文件上传插件，但我不支持多个files，但我不知道如何发送自定义属性。我想将所有这些自定义属性发送到服务器，每个chunk没问题（我们如何发送formData ）。我们如何同样发送formData，我可以发送属性吗？

var formdata = new formData();

formdata.append('filename',currentFile[i]);

formdata.append('filesize',currentFile[i].size);

注意：我想在chunks

中发送数据

以下是我正在尝试jsfiddle的代码（在firefox中完美打开）：http://jsfiddle.net/davidchase03/ChJ9B/

HTML

<input id="fileupload" type="file" name="files[]" multiple>
<div class="progress">
    <div class="meter" style="width: 0%;"></div>
</div>
<div class="data"></div>

的JavaScript

$(function () {
    $('#fileupload').fileupload({
        url: '/echo/json/',
        maxChunkSize: 1048576,
        maxRetries: 3,
        dataType: 'json',
        multipart: false,
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10),
                meter = $('.progress .meter'),
                percent = progress + '%';
            meter.css('width', percent).text(percent);
        },
        add: function (e, data) {
            data.context = $('<p/>').text('Uploading...').appendTo('.data');
            data.submit();
        },
        done: function (e, data) {
            data.context.text('Upload finished.');
        },
        fail: function (e, data) {
            data.context.text('Upload failed.');
            $('.progress').addClass('alert');
            console.warn('Error: ', data);

        }
    }).on('fileuploadchunksend', function (e, data) {
         // if (data.uploadedBytes === 3145728 ) return false;
    }).on('fileuploadchunkdone', function (e, data) {

    });
});

问题：为了让您明白这就是我想要的How to send custom data to server using jquery-file-uploader

请提前帮助我！

Answer 1

您可以使用标题选项发送其他自定义属性。例如：

$(function () {
    $('#fileupload').fileupload({
        url: '/echo/json/',
        ...
        headers : {
           customAttribute: 'customValue'
        }
});

对于动态值，您可以使用beforeSend回调，如以下示例中所述

$(function () {
    $('#fileupload').fileupload({
        url: '/echo/json/',
        ...
        beforeSend : function(xhr) {
           xhr.setRequestHeader("customAttribute", someCalculateValueFunction('customValue'));
        }
});

Answer 2

$('#fileupload').fileupload({
    formData: {customAttr: 'value'}
});

Answer 3

您可以使用headers选项添加任何自定义信息

maxRetries: 3,
headers: {
   'myname': 'Tarun'
},
dataType: 'json',

然后您可以看到标题随每个块一起发送

第1块

第2块

然后在服务器上，您可以提取此信息并按照您喜欢的方式使用

如何为块文件上传发送自定义属性

3 个答案: