0

Jquery_fileupload (JFU) を使用してファイルを Amazon s3 バケットに送信しています。

ユーザーがファイルを選択すると、ファイルは正常に自動アップロードされ、Amazon はステータス コード 204 no content を返します。簡単にするために 200 コードを返すように s3 ポリシーを変更しました。

問題は、エラーがない場合でも、JFU が各ファイルに対してエラー メッセージを表示することです。

Firefox では: SyntaxError: JSON.parse: 予期しないデータの終わりです

クロムでは: SyntaxError: Unexpected end of input

これを解決するためのアイデアは役に立ちます。ありがとう

JFU セットアップ:

    $(document).ready(function() {
      $('#fileupload').fileupload({
        dropZone: $('#dropzone'),
        autoUpload: true,
        paramName: 'file',
        singleFileUploads: false,
        limitMultiFileUploads: 1,
        sequentialUploads: true,
        multipart: true,
        uploadTemplateId: null,
        downloadTemplateId: null,
        filesContainer: $('#upload-files-container'),
        uploadTemplate: function (o) {
          var rows = $();
          $.each(o.files, function (index, file) {
            var row = $('<tr class="template-upload fade">' +
            '<td class="preview"><span class="fade"></span></td>' +
            '<td class="name"></td>' +
            '<td class="size"></td>' +
            (file.error ? '<td class="error" colspan="2"></td>' :
            '<td><div class="progress progress-info progress-striped active">' +
            '<div class="bar" style="width:0%;"></div></div></td>'
            ) + '<td class="cancel"><button class="btn btn-warning">Cancel</button></td></tr>');
            row.find('.name').text(file.name);
            row.find('.size').text(o.formatFileSize(file.size));
            if (file.error) {
              row.find('.error').text(
                locale.fileupload.errors[file.error] || file.error
              );
            }
            rows = rows.add(row);
          });
          return rows;
        },
        downloadTemplate: function (o) {
          var rows = $();
          $.each(o.files, function (index, file) {
            var row = $('<tr class="template-download">' +
            (file.error ? '<td></td><td class="name"></td>' +
            '<td class="size"></td><td class="error" colspan="2"></td>' :
            '<td class="preview"></td>' +
            '<td class="name"><a></a></td>' +
            '<td class="size"></td><td colspan="2"></td>'
            ) + '</tr>');
            row.find('.size').text(o.formatFileSize(file.size));
            if (file.error) {
              row.find('.name').text(file.name);
              row.find('.error').text(
                locale.fileupload.errors[file.error] || file.error
              );
            } else {
              row.find('.name a').text(file.name);
              if (file.thumbnail_url) {
                row.find('.preview').append('<a><img></a>')
                .find('img').prop('src', file.thumbnail_url);
                row.find('a').prop('rel', 'gallery');
              }
              row.find('a').prop('href', file.url);
            }
            rows = rows.add(row);
          });
          return rows;
        }
      })
    });

役立つ場合の S3 ポリシー データ:

def policy_data
  {
    expiration: @options[:expiration],
    conditions: [
      ["starts-with", "$utf8", ""],
      ["starts-with", "$key", ""],
      ["content-length-range", 0, @options[:max_file_size]],
      {bucket: @options[:bucket]},
      {acl: @options[:acl]},
      {success_action_status: "200"}
    ]
  }
end
4

3 に答える 3

2

同様に、Jquery_fileupload が不適切にフォーマットされた json 応答が原因で「失敗」したことがわかりました。ブラウザーの問題か S3 かはわかりません。ファイルは実際には問題なくアップロードされますが、無効な json によりエラーがスローされます。

とにかく、JFUオプションを設定して修正しました：

dataType: 'xml'

次に、応答を xml から json に変換します。(そのために、x2jsライブラリを使用しました。)

これが私の AngularJS 'fileuploaddone' リスナーです。

$scope.$on('fileuploaddone', function(e, data) {
  var response;
  response = x2js.xml2json(data.result);
  $scope.file_url = response != null ? (_ref = response.PostResponse) != null ? _ref.Location : void 0 : void 0;
});
于 2013-06-28T20:57:21.313 に答える