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，但要确保你使用它们接受的所有非常有用的参数。

PHP / jQuery S3上载不适用于带空格的文件

1 个答案: