[英]Javascript send video blob to PHP - how to also send mimetype?
I'm generating a blob in JavaScript via a recorded video stream ( MediaRecorder
). 我正在通过录制的视频流(
MediaRecorder
)在JavaScript中生成blob。
The resultant file ends up as a .webm, as confirmed by ffmpeg. ffmpeg确认,结果文件最终以.webm结尾。 So far, so good.
到现在为止还挺好。 Here's what I'm doing.
这就是我在做什么。
//promises container
let dfds = [];
//promise 1 - get blob file content
dfds.push(new Promise(resolve => {
var xhr = new XMLHttpRequest();
xhr.open('GET', file_url, true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
if (this.status == 200) resolve(this.response);
};
xhr.send();
}));
//(other non-pertinent promises omitted here)
//when ready, build and send request
Promise.all(dfds).then(resolution_data => {
let req = new XMLHttpRequest(), fd = new FormData();
fd.append('title', title);
fd.append('file', resolution_data[0]); //<-- the blob
req.open('POST', 'my-script.php');
req.send(fd);
});
This works perfectly. 这很完美。 However, on the PHP side, when I run
print_r($_FILES)
, the mime type is ending up as text/plain. 但是,在PHP方面,当我运行
print_r($_FILES)
,MIME类型最终以text / plain结尾。 I'd like to submit to PHP the mime type, so I can check this before allowing the file through (I'm aware mimetype is not always reliable, but it's just another check of several I'm doing.) 我想向PHP提交mime类型,因此我可以在允许文件通过之前对其进行检查(我知道mimetype并不总是可靠的,但这只是我正在做的另一项检查。)
I added this to the AJAX request: 我将此添加到AJAX请求中:
req.setRequestHeader('Content-Type', 'video/webm');
However with this added, the PHP script reports that $_FILES
is completely empty. 但是,添加此代码后,PHP脚本报告
$_FILES
完全为空。
How can I submit the mime type along with the file? 如何与文件一起提交mime类型?
The formData.append() as a 'filename' field. formData.append()作为“文件名”字段。 See:
看到:
https://developer.mozilla.org/en-US/docs/Web/API/FormData/append https://developer.mozilla.org/en-US/docs/Web/API/FormData/append
What would happen if you gave it a name like 'myMovie.webm'? 如果您给它命名为“ myMovie.webm”,会发生什么? It's worth a try, I think.
我认为值得一试。 So:
所以:
fd.append('file', resolution_data[0]);
would become: 会成为:
fd.append('file', resolution_data[0], 'myMovie.webm');
I haven't tested this at all, it's just a suggestion. 我根本没有测试过,这只是一个建议。
Since you haven't reacted yet, I read a bit more. 由于您还没有反应,因此我阅读了更多。 I also found this:
我也发现了这一点:
https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects
in it they use this code: 他们在其中使用以下代码:
var content = '<a id="a"><b id="b">hey!</b></a>';
var blob = new Blob([content], { type: "text/xml"});
formData.append("webmasterfile", blob);
Note the mime type! 注意MIME类型! That looks very promising!
看起来非常有前途!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.