3

我一直在尝试从我的网站将文件上传到机架空间存储。我已按照以下 api 指南创建将文件上传到 rackspace 的表单。 http://docs.rackspace.com/files/api/v1/cf-devguide/content/FormPost-d1a555.html 第 7.2、7.2.1 和 7.2.2 节

如果我进行正常的表单提交，它完全可以正常工作。该文件被上传到机架空间存储并返回状态 201 和空白消息。我检查了容器中的文件并成功上传。

但是现在问题来了，当我尝试使用 Blueimp jQuery 文件上传插件集成进度条时。

这是我初始化文件上传插件的代码

$(function () {
'use strict';

// Initialize the jQuery File Upload widget:
$('#fileupload').fileupload({maxChunkSize: 10000000});




if (window.location.hostname === 'blueimp.github.com') {
    // Demo settings:
    $('#fileupload').fileupload('option', {
        url: '//jquery-file-upload.appspot.com/',
        maxFileSize: 5000000,
        acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
        process: [
            {
                action: 'load',
                fileTypes: /^image\/(gif|jpeg|png)$/,
                maxFileSize: 20000000 // 20MB
            },
            {
                action: 'resize',
                maxWidth: 1440,
                maxHeight: 900
            },
            {
                action: 'save'
            }
        ]
    });
    // Upload server status check for browsers with CORS support:
    if ($.support.cors) {
        $.ajax({
            url: '//jquery-file-upload.appspot.com/',
            type: 'HEAD'
        }).fail(function () {
            $('<span class="alert alert-error"/>')
                .text('Upload server currently unavailable - ' +
                        new Date())
                .appendTo('#fileupload');
        });
    }
} else {
    // Load existing files:
    console.log("mukibul");
    $('#fileupload').each(function () {
        var that = this;
        console.log("result1");
        $.getJSON(this.action, function (result) {

            if (result && result.length) {
                console.log("result");
                console.log(result);
                $(that).fileupload('option', 'done')
                    .call(that, null, {result: result});
            }
        });
    });
}});

这是上传文件的网络表单

<form id="fileupload" action="https://storage101.dfw1.clouddrive.com/v1/MossoCloudFS_4d6c7b53-7b5a-458c-8a2d-957971f293bb/tranceyatralocal/${sessionScope.tyUser.userID}/${albumDetails.albumId}" method="POST" enctype="multipart/form-data">
    <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
     <input type="hidden" name="redirect" value="http://localhost:8080/impianlabs/home/uploadResponse.htm" />
        <input type="hidden" name="max_file_size" value="${max_file_size}" />
        <input type="hidden" name="max_file_count" value="10" />
        <input type="hidden" name="expires" value="${expires}" />
        <input type="hidden" name="signature" value="${hmac}" />
    <div class="row fileupload-buttonbar" style="margin:10px;">
        <div class="span7" style="">
            <!-- The fileinput-button span is used to style the file input field as button -->
            <span class="btn btn-success fileinput-button">
                <i class="icon-plus icon-white"></i>
                <span>Add files...</span>
                 <input type="file" name="files[]" multiple>
            </span>
            <button type="submit" class="btn btn-primary start">
                <i class="icon-upload icon-white"></i>
                <span>Start upload</span>
            </button>
            <button type="reset" class="btn btn-warning cancel">
                <i class="icon-ban-circle icon-white"></i>
                <span>Cancel upload</span>
            </button>
            <button type="button" class="btn btn-danger delete">
                <i class="icon-trash icon-white"></i>
                <span>Delete</span>
            </button>
            <input type="checkbox" class="toggle">
        </div>
        <!-- The global progress information -->
        <div class="span5 fileupload-progress fade">
            <!-- The global progress bar -->
            <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                <div class="bar" style="width:0%;"></div>
            </div>
            <!-- The extended global progress information -->
            <div class="progress-extended">&nbsp;</div>
        </div>
    </div>
    <!-- The loading indicator is shown during file processing -->
    <div class="fileupload-loading"></div>
    <br>
   <!--  <div>
        <ul id="filePreview">

        </ul>
    </div> -->




    <!-- The table listing the files available for upload/download -->





    <table role="presentation" class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>
</form>

当我上传任何文件时，它开始正常上传，进度开始按预期显示。在 chrome Inspect->Network 选项卡中，我可以看到对机架空间服务器的两个请求。一个是返回 200 的方法 OPTIONS，另一个是 POST 方法，它一直处于待处理状态，直到进度条达到 100%，但一旦达到 100%，POST 方法的状态就会更改为已取消，并且 jquery 文件上传插件在网页。我无法理解为什么插件会抛出错误。我检查了容器，发现文件上传成功。

我使用 curl 在机架空间中设置了 CORS 所需的所有标头。但不确定我做错了什么。任何解决问题的帮助将不胜感激。

注意：我正在为应用程序使用 spring mvc。

谢谢， 穆基布尔

4

2 回答 2

4

At the present time, Cloud Files and the underlying Openstack Swift component do support POST uploading as you've been successful with (Docs here and here). Unfortunately there appears to be a known issue that prevents CORS from working properly due to a missing header in the response.

The change has been merged into master, but hasn't been deployed to Rackspace's running version for Cloud Files. I have an inquiry in with our CF team on a timeline for having this fixed so we can come to a real resolution for this.

UPDATE: The script fails to upload for me in Chrome, but works in Firefox. Chrome reports the POST is cancelled as you described, but Firefox completes it and gets an HTTP 303 response along with the expected redirect URI and the file is present in the container. I'm looking at the code for the plugin to see how it handles success/failure in it's responses.

于 2013-11-05T20:55:02.310 回答
1

刚刚从 Rackspace 发现此合并不在路线图中，目前也没有进行测试。我不认为这会在不久的将来出现。

希望有一天他们会实施它。现在，在将其提供给浏览器之前，我将覆盖控制器中页面的标题。

于 2013-11-06T19:48:18.380 回答