通过Laravel和ajax formdata上传视频

时间:2015-11-04 06:06:30

标签: php jquery ajax laravel laravel-5

请检查我的以下代码并帮助我通过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);
}

Firebug控制台帖子 enter image description here

Firebug控制台HTML enter image description here

Firebug控制台响应 enter image description here

0 个答案:

没有答案