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：

    函数句柄文件选择（）{
        setProgress(0, '上传开始...');

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

        var pieces = files[0].name.split(".");
        var fext = "-原始。" + 件[件.长度 - 1]; //fext = "-original.jpg"
        var currdatetime = new Date().getTime();
        var dokey = "FINVID" + currdatetime; //dockey = "FINVID20130523123546

        文件[0].name = dokey;

        $.get("updatetxtfile.php", { vidid: dokey, vidtitle: title } );
        上传文件（文件[0]，fext）；
    }


    函数上传文件（文件，fext）{
      executeOnSignedUrl（文件，函数（签名 URL）
      {
        uploadToS3(file, signedURL, fext);
      },fext);
    }


    函数uploadToS3（文件，网址，fext）{
        var xhr = createCORSRequest('PUT', url);
        如果（！xhr）{
            setProgress(0, '不支持CORS');
        }
        别的
      {
        xhr.onload = 函数（）
        {
          如果（xhr.status == 200）
          {
            setProgress(100, '上传完成');
                    触发器编码（文件，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 ? 'Finalizing...' : 'Uploading...');
          }
        };

        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 回答