PHP/jQuery S3 上傳不適用於帶空格的文件

Question

使用幾個不同腳本的組合，我試圖創建一個工具，允許用戶將視頻從他們的本地機器上傳到 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：

function handleFileSelect() {
        setProgress(0, 'Upload started...');

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

        var pieces = files[0].name.split(".");
        var fext = "-original." + pieces[pieces.length - 1]; //fext = "-original.jpg"
        var currdatetime = new Date().getTime(); 
        var dockey = "FINVID" + currdatetime; //dockey = "FINVID20130523123546

        files[0].name = dockey;

        $.get("updatetxtfile.php", { vidid: dockey, vidtitle: title } );
        uploadFile(files[0],fext);
    }


    function uploadFile(file,fext){
      executeOnSignedUrl(file, function(signedURL) 
      {
        uploadToS3(file, signedURL, fext);
      },fext);
    }


    function uploadToS3(file, url, fext){
        var xhr = createCORSRequest('PUT', url);
        if (!xhr) {
            setProgress(0, 'CORS not supported');
        }
        else
      {
        xhr.onload = function() 
        {
          if(xhr.status == 200)
          {
            setProgress(100, 'Upload completed');
                    triggerEncoding(file, fext);
          }
          else
          {
            setProgress(0, 'Upload error: ' + xhr.status);
          }
        };

        xhr.onerror = function() 
        {
          setProgress(0, 'XHR error.');
        };

        xhr.upload.onprogress = function(e) 
        {
          if (e.lengthComputable) 
          {
            var percentLoaded = Math.round((e.loaded / e.total) * 100);
            setProgress(percentLoaded, percentLoaded == 100 ? 'Finalizing...' : 'Uploading...');
          }
        };

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

        xhr.send(file);
      }
    }

因此，用戶選擇一個視頻文件，點擊提交，然后 handleFileSelect 被觸發。 最好我想在上傳之前重命名文件，但我什至不能這樣做。 從規格來看，這似乎是不可能的。 那么到底發生了什么？ 認為我不能上傳帶有空格的文件是很瘋狂的，所以我一定是犯了一個錯誤，對吧？

Answer 1

看看這個。

看起來您可以輕松管理鍵值（靜態或動態）

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

和回調動作

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

不會對手動上傳造成太大影響。

如果需要，您可以隨時使用 ajax，但請確保使用它們接受的所有非常有用的參數。