1

いくつかの異なるスクリプトを組み合わせて使用​​して、ユーザーがローカル マシンから S3 バケットに動画をアップロードできるツールを作成しようとしています。スペースのないファイルでは見事に機能しますが、スペースがあると完全に機能しなくなります (アップロードが停止し、XHR エラーが発生します)。

アップロードフォーム:

<table>
    <tr>
        <td>File:</td>
        <td><input type="file" id="files" name="files[]" multiple /></td>
    </tr>
    <tr>
        <td>Title:</td>
        <td><input type="text" id="title" name="title" size="50" /></td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td><input type="submit" id="submit" name="submit" value="Start Encoding" /></td>
    </tr>
</table>

<script type="text/javascript">
document.getElementById('submit').addEventListener('click', handleFileSelect, false);
setProgress(0, 'Waiting for upload.');
</script>

これがJavaScriptです：

    関数 handleFileSelect() {
        setProgress(0, 'アップロード開始...');

        var files = document.getElementById('files').files;
        var title = document.getElementById('title').value;

        var pieces = files[0].name.split(".");
        var fext = "-オリジナル。" + 個[pieces.length - 1]; //fext = "-original.jpg"
        var currdatetime = new Date().getTime();
        var dokey = "FINVID" + currdatetime; //dockey = "FINVID20130523123546

        ファイル[0].name = dokey;

        $.get("updatetxtfile.php", { vidid: dokey, vidtitle: タイトル } );
        uploadFile(ファイル[0],fext);
    }


    関数 uploadFile(ファイル,fext){
      executeOnSignedUrl(ファイル、関数(signedURL)
      {
        uploadToS3(ファイル、signedURL、fext);
      },fext);
    }


    関数 uploadToS3(ファイル、URL、fext){
        var xhr = createCORSRequest('PUT', url);
        もし (!xhr) {
            setProgress(0, 'CORS はサポートされていません');
        }
        そうしないと
      {
        xhr.onload = 関数()
        {
          場合 (xhr。ステータス == 200)
          {
            setProgress(100, 'アップロード完了');
                    triggerEncoding(ファイル、fext);
          }
          そうしないと
          {
            setProgress(0, 'アップロード エラー: ' + xhr.status);
          }
        };

        xhr.onerror = 関数()
        {
          setProgress(0, 'XHR エラー');
        };

        xhr.upload.onprogress = 関数 (e)
        {
          if (e.lengthComputable)
          {
            var percentLoaded = Math.round((e.loaded / e.total) * 100);
            setProgress(percentLoaded, percentLoaded == 100 ? 'ファイナライズ中...': 'アップロード中...');
          }
        };

        xhr.setRequestHeader('Content-Type', file.type);
        xhr.setRequestHeader('x-amz-acl', 'public-read');

        xhr.send(ファイル);
      }
    }

したがって、ユーザーが動画ファイルを選択して送信すると、handleFileSelect がトリガーされます。アップロードする前にファイルの名前を変更したいのですが、それもできません。仕様からしてありえないような気がします。それで、一体何が起こっているのですか？スペースを含むファイルをアップロードできないと考えるのは正気ではないので、間違いを犯しているに違いありませんよね?

4

1 に答える 1

0

これをチェックしてください。

キー値を（静的または動的に）簡単に管理できるようです

<input type="hidden" name="key" value="uploads/${filename}">

およびコールバック アクション

<input type="hidden" name="success_action_redirect" value="http://localhost/">

手動アップロードをあまり台無しにすることなく。

必要に応じていつでも ajax にすることができますが、受け入れられる非常に便利なパラメーターをすべて使用していることを確認してください。

于 2013-12-01T22:28:18.423 に答える