3

Web サイトからラックスペース ストレージにファイルをアップロードしようとしています。次の API ガイドに従って、ファイルをラックスペースにアップロードするためのフォームを作成しました。 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});
            }
        });
    });
}});

ファイルをアップロードするための Web フォームは次のとおりです。

<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] タブで、ラックスペース サーバーへの 2 つのリクエストを確認できました。1 つは 200 を返すメソッド OPTIONS で、もう 1 つはメソッド POST で、プログレス バーが 100% に達するまで Pending のままですが、100% に達するとすぐに POST メソッドのステータスがキャンセルに変わり、jquery ファイル アップロード プラグインがエラー true を出力します。ウェブページ。プラグインがエラーをスローする理由を理解できません。コンテナーを確認したところ、ファイルが正常にアップロードされていることがわかりました。

curl を使用して、CORS に必要なすべてのヘッダーをラックスペースに設定しました。しかし、私が間違っていることはわかりません。問題を解決するための助けをいただければ幸いです。

注: アプリケーションに spring mvc を使用しています。

ありがとう、ムキブル

4

2 に答える 2

4

現時点では、Cloud Files と基礎となる Openstack Swift コンポーネントは、成功したように POST アップロードをサポートしています (Docs here and here )。残念ながら、応答のヘッダーが欠落しているために CORS が正しく機能しないという既知の問題があるようです。

変更はマスターにマージされましたが、Cloud Files の Rackspace の実行中のバージョンにはデプロイされていません。これを修正するためのタイムラインについて CF チームに問い合わせているので、これを実際に解決することができます。

更新: スクリプトは Chrome ではアップロードできませんが、Firefox では機能します。あなたが説明したようにChromeはPOSTがキャンセルされたと報告しますが、Firefoxはそれを完了し、予想されるリダイレクトURIとファイルがコンテナに存在するとともにHTTP 303応答を取得します。プラグインのコードを見て、応答の成功/失敗をどのように処理するかを確認しています。

于 2013-11-05T20:55:02.310 に答える
1

Rackspace から、このマージがロードマップになく、現在もテストされていないことがわかりました。私はこれが近い将来に来るとは思わない。

うまくいけば、いつの日か彼らはそれを実装します。今のところ、コントローラーでページのヘッダーを上書きしてからブラウザーに提供します。

于 2013-11-06T19:48:18.380 に答える