Javascript PHP/jquerys3上传不'；不能处理带有空格的文件

我正在尝试使用几个不同脚本的组合来创建一个工具，允许用户将视频从本地机器上传到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>

文件：
标题：
document.getElementById（'submit'）。addEventListener（'click'，handleFileSelect，false）；
setProgress（0，“正在等待上载”）；

下面是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（）{ setProgress（0，“已开始上载…”）； var files=document.getElementById（'files'）.files； var title=document.getElementById（'title'）。值； 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 文件[0]。名称=dockey； $.get（“updatetxtfile.php”，{vidid:dockey，vidtitle:title}）； 上传文件（文件[0]，fext）； } 函数上载文件（文件，fext）{ executeOnSignedUrl（文件、函数（signedURL） { 上载到3（文件、签名URL、fext）； }，fext）； } 函数uploadToS3（文件、url、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（如长度可计算） { var percentLoaded=数学轮（（e.loaded/e.total）*100）； setProgress（percentLoaded，percentLoaded==100？'Finalizing…'：'Upload…'）； } }; setRequestHeader（'Content-Type'，file.Type）； setRequestHeader（'x-amz-acl'，'public read'）； 发送（文件）； } } 因此，用户选择一个视频文件，点击submit，然后触发handleFileSelect。最理想的情况是，我想在上传之前重命名该文件，但我甚至不能这样做。从规范来看，这可能是不可能的。那么到底发生了什么事？认为我不能上传带有空格的文件是疯狂的，所以我一定是在做一个mis带走，对吗？

退房

看起来您可以轻松地管理键值（静态或动态）

以及回调操作

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

而不会给手动上传带来太多麻烦

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

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