自定义没有 data-url 属性的 blueimp 上传器答案

【问题标题】：Customize blueimp uploader without data-url property自定义没有 data-url 属性的 blueimp 上传器
【发布时间】：2013-12-11 21:08:44
【问题描述】：

我有一个 API 调用，例如“/servername + uploadfilename”。我需要使用 blueimp jquery 上传器 + 进度条上传文件。我在做什么：

标记：

    <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 上传器：

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

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

有没有办法将文件上传到“webServer + file.name”之类的url并显示进度条？

谢谢。

【问题讨论】：

标签： jquery ajax blueimp

【解决方案1】：

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

【讨论】：