Question

我有一个类似“/ servername + uploadfilename”的API调用。我需要使用blueimp jquery uploader + progressbar上传文件。我在做什么：

标记：

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

jquery + ajax uploader：

$('#fileupload').fileupload({
            acceptFileTypes: /(\.|\/)(gif|jpe?g|png|tif|tiff)$/i,
            dataType: 'json',
            progressall: function(e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                console.log('progress: ' + progress);
                $('#progress .bar').css('width', progress + '%');
            },
            add: function(e, data) {
                data.context = $('<button/>').text('Upload')
                    .appendTo($('#fileupload'))
                    .click(function() {
                    data.context = $('<p/>').text('Uploading...').replaceAll($(this));
                    data.submit();
                });
                $.each(data.files, function(index, file) {
                    console.log(file.name);
                    $.ajax({
                        url: webServer + file.name,
                        type: 'PUT',
                        xhrFields: {
                            withCredentials: true
                        },
                        data: file,
                        processData: false,
                        success: function(data) {
                            console.log("succeeded");
                        }
                    });
                });
            },
            done: function(e, data)
            {
                console.log('done');
            }
        });

因此，文件上传得很好（在“添加”侦听器内部触发以下url的ajax请求：“webServer + file.name”），但“progressall”侦听器不会触发。我发现这只是因为我无法为#fileupload元素指定“data-url”属性，但在这种情况下我不知道如何为“data-url”属性指定正确的URL。

有没有办法将文件上传到网址，如“webServer + file.name”并显示进度条？

感谢。

Answer 1

我已经通过添加选项type: 'PUT'解决了这个问题，而且我已经摆脱了add:侦听器中的ajax-jquery请求

自定义blueimp上传器而不使用data-url属性

1 个答案: