javascript - 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

检查this出来。

看起来您可以轻松管理键值(静态或动态)

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

和回调操作

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

手动上传不会造成太多困惑。

如果您愿意，您可以随时将其设置为 ajax，但请确保您使用的是它们接受的所有非常有用的参数。