I have an API call like "/servername + uploadfilename". I need to upload files using blueimp jquery uploader + progressbar. What I am doing:

Markup:

    <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');
            }
        });

So, files upload well (inside "add" listener fires ajax request for the following url: "webServer + file.name"), but "progressall" listener is not fires. I found out that is just because I can't specify "data-url" property for #fileupload element, but in this case I don't know how to specify a correct url for "data-url" property.

Is there a way to upload files to the url like "webServer + file.name" and show progressbar?

Thanks.

有帮助吗?

解决方案

I've resolved this issue by adding option type: 'PUT' and I've got rid from ajax-jquery request inside add: listener

许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top