试图从浏览器上传blob数据，控制台中有输入和输出。我正在使用来自的图像压缩器(https://github.com/fengyuanchen/compressorjs)。
一切都很好，但理解hot"捕获"这个blob并发送到服务器的问题。
我试过这个：
<form method="post" action="">
<input type="button" value="Проверить" onclick="myAjax()">
</form>
<script type="text/javascript">
var file = "outputURL"; // instance of File
function myAjax() {
$.ajax({
type: 'POST',
url: 'upload.php',
data: file,
contentType: 'application/my-binary-type', // set accordingly
processData: false
});
}
</script>
upload.php：
$fname = "11" . ".wav";
move_uploaded_file($_FILES['file']['tmp_name'], "/" . $fname);
这个想法是在html上有一些按钮，它将把输出的压缩图像上传到服务器。我也试过其他几个例子，但主要问题是我不知道如何处理blob。
这是我的控制台输出：
Input: FilelastModified: 1548655773101lastModifiedDate: Mon Jan 28 2019 11:09:33 GMT+0500 {}name: "IMG_20160705_165257565.jpg"size: 3233327type: "image/jpeg"webkitRelativePath: ""__proto__: File
Output: BloblastModified: 1572005360479lastModifiedDate: Fri Oct 25 2019 17:09:20 GMT+0500 {}name: "IMG_20160705_165257565.jpg"size: 1625797type: "image/jpeg"__proto__: Blob
请帮助了解如何在浏览器中处理Blob数据。
以下是如何上传blob:的完整工作示例
<html>
<head>
<meta charset="UTF-8">
<script>
function init() {
var form = document.getElementById('f');
if(form) {
form.addEventListener('submit', function(event) {
if(form.ajax.checked) {
var formData = new FormData();
for(var i=0; i<form.length; i++) {
if(form[i].type == 'file') {
var files = form[i].files;
var blob = files[0].slice(0, files[0].size, files[0].type);
formData.append(form[i].name, blob, files[0].name);
}
else {
formData.append(form[i].name, form[i].value);
}
}
var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
// what do I do here?
// is it
// window.location = URL.createObjectURL(xhr.response);
// or should it be
// document.write(responseText);
// or even
// document.close(); document.open(); document.write(xhr.responseText);
// or?
}
};
xhr.open('POST', form.action, true);
xhr.send(formData);
event.preventDefault();
}
}, false);
}
}
</script>
</head>
<body onload='init()'>
<?php
if(isset($_FILES['file'])) {
echo '<ul>';
echo '<li>name: '.$_FILES['file']['name'].'</li>';
echo '<li>type: '.$_FILES['file']['type'].'</li>';
echo '<li>size: '.$_FILES['file']['size'].'</li>';
echo '<li>upload type: '.$_POST['ajax'].'</li>';
echo '</ul>';
echo "<a href='http://localhost/test.php'>reset</a>";
}
else {
?>
<form enctype='multipart/form-data' id='f' method='POST'>
<input name='file' type='file'/>
ajax: <input name='ajax' type='checkbox'/>
<input type='submit'/>
</form>
<?php
}
?>
</body>
</html>