请检查我的以下代码并帮助我通过Ajax formdata和Laravel上传视频文件。我已经尝试了一些上传文件的代码。 Firebug控制台帖子显示数据正在发布但响应为空" firebug console html显示"。我附上了firebug控制台帖子和html响应的图像。
JS
function saveToDiskOrOpenNewTab(recordRTC) {
recordingDIV.querySelector('#save-to-disk').parentNode.style.display = 'block';
recordingDIV.querySelector('#save-to-disk').onclick = function() {
if(!recordRTC) return alert('No recording found.');
recordRTC.save();
};
recordingDIV.querySelector('#open-new-tab').onclick = function() {
if(!recordRTC) return alert('No recording found.');
window.open(recordRTC.toURL());
};
recordingDIV.querySelector('#upload-to-server').disabled = false;
recordingDIV.querySelector('#upload-to-server').onclick = function(e) {
e.preventDefault();
if(!recordRTC) return alert('No recording found.');
this.disabled = true;
var button = this;
uploadToServer(recordRTC, function(progress, fileURL) {
if(progress === 'ended') {
button.disabled = false;
button.innerHTML = 'Click to download from server';
button.onclick = function() {
window.open(fileURL);
};
return;
}
button.innerHTML = progress;
});
};
}
var listOfFilesUploaded = [];
function uploadToServer(recordRTC, callback) {
var blob = recordRTC instanceof Blob ? recordRTC : recordRTC.blob;
var fileType = blob.type.split('/')[0] || 'audio';
var fileName = (Math.random() * 1000).toString().replace('.', '');
if (fileType === 'audio') {
fileName += '.' + (!!navigator.mozGetUserMedia ? 'ogg' : 'wav');
} else {
fileName += '.webm';
}
// create FormData
var formData = new FormData();
formData.append(fileType + '-filename', fileName);
formData.append(fileType + '-blob', blob);
callback('Uploading ' + fileType + ' recording to server.');
makeXMLHttpRequest('/recording/video', formData, function(progress) {
if (progress !== 'upload-ended') {
callback(progress);
return;
}
var initialURL = location.href.replace(location.href.split('/').pop(), '') + 'uploads/';
//http://www.ct.dev/sarath.ts_993/uploads/
callback('ended', initialURL + fileName);
// to make sure we can delete as soon as visitor leaves
listOfFilesUploaded.push(initialURL + fileName);
});
}
function makeXMLHttpRequest(url, data, callback) {
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
callback('upload-ended');
}
};
request.upload.onloadstart = function() {
callback('Upload started...');
};
request.upload.onprogress = function(event) {
callback('Upload Progress ' + Math.round(event.loaded / event.total * 100) + "%");
};
request.upload.onload = function() {
callback('progress-about-to-end');
};
request.upload.onload = function() {
callback('progress-ended');
};
request.upload.onerror = function(error) {
callback('Failed to upload to server');
console.error('XMLHttpRequest failed', error);
};
request.upload.onabort = function(error) {
callback('Upload aborted.');
console.error('XMLHttpRequest aborted', error);
};
//request.open('get', url);
request.open('POST', url);
var metas = document.getElementsByTagName('meta');
for (i=0; i<metas.length; i++) {
if (metas[i].getAttribute("name") == "csrf-token") {
request.setRequestHeader("X-CSRF-Token", metas[i].getAttribute("content"));
}
}
request.send(data);
}
route.php
Route::post('/recording/video', [
'middleware' => 'auth',
'before' => 'csrf',
'as' => 'recordingvideo',
'uses' => 'RecordingvideoController@store'
]);
RecordingvideoController.php
public function store(RecordingvideoRequest $request)
{
$type = $request->file('video-blob');
$filename = $request->filename;
dd($filename);
}