javascript/PHP 文件上传

Question

我正在使用这个地方的录音机

http://webaudiodemos.appspot.com/AudioRecorder/index.html ,

但我不想将文件保存在本地，而是想将其上传回服务器。我最好的办法是尝试修改 recording.js 脚本中的 Recorder.setupDownload 函数，将其创建的 blob 传递给我发现的简单上传 PHP 脚本 here :

<?php
if(isset($_FILES['image'])){
    $errors= array();
    $file_name = $_FILES['recording']['name'];
    $file_size =$_FILES['recording']['size'];
    $file_tmp =$_FILES['recording']['tmp_name'];
    $file_type=$_FILES['recording']['type'];   
    $file_ext=strtolower(end(explode('.',$_FILES['image']['name'])));
    $extensions = array("wav");         
    if(in_array($file_ext,$extensions )=== false){
     $errors[]="extension not allowed, please choose wav file."
    }
    if($file_size > 2097152){
    $errors[]='File size under 20MB';
    }               
    if(empty($errors)==true){
        move_uploaded_file($file_tmp,"images/".$file_name);
        echo "Success";
    }else{
        print_r($errors);
    }
}
?>

我正在使用 jquery 调用来测试它，

    $.ajax({
            type: "POST",
            url: "../scripts/Single-File-Upload-With-PHP.php",
            data: blob
    });

但我显然做错了什么。原始 PHP 脚本中有一个表单用于输入，我尝试直接调用php代码时将其注释掉。

所以我的问题是；

• 如何修改Recorder.setupDownload以将文件上传到指定文件夹？
• 出现问题时如何报告？

或者，有更优雅的解决方案吗？

编辑:关于 blob 中的内容

这就是在 recorder.js 中定义 blob 的方式:

worker.onmessage = function(e){
      var blob = e.data;
      currCallback(blob);
}

据我了解，它是使用 recorderWorker.js(注释中的链接)中列出的方法创建的，并且它应该只包含一个 wav 文件。

Answer 1

我认为您不应该在工作程序中创建 blob，但我有一个类似的设置(实际上基于相同的示例)，我从工作程序中检索样本缓冲区并将它们保存到 AudioMixer 类的 m_data 字段中录制一些内容，然后:

//! create a wav file as blob
WTS.AudioMixer.prototype.createAudioBlob = function( compress ){
    // the m_data fields are simple arrays with the sampledata
    var dataview = WTS.AudioMixer.createDataView( this.m_data[ 0 ], this.m_data[ 1 ], this.m_sampleRate );
    return( new Blob( [ dataview ], { type:'audio/wav' } ) );
}

WTS.AudioMixer.createDataView = function( buffer1, buffer2, sampleRate ){
    var interleaved = WTS.AudioMixer.interleave( buffer1, buffer2 );
    // here I create a Wav from the samplebuffers and return a dataview on it
    // the encodeWAV is not provided..
    return( WTS.AudioMixer.encodeWAV( interleaved, false, sampleRate ) );
}

然后将其发送到服务器

var blob = this.m_projectView.getAudioEditView().getAudioMixer().createAudioBlob();
if( blob ){
    //! create formdata (as we don't have an input in a DOM form)
    var fd = new FormData();
    fd.append( 'data', blob );

    //! and post the whole thing @TODO open progress bar
    $.ajax({
        type: 'POST',
        url: WTS.getBaseURI() + 'mixMovie',
        data: fd,
        processData: false,
        contentType: false
    } );
}

我有一个节点服务器正在运行，blob 被发送到该服务器，并且可以使用 Express 节点模块直接将其作为 wav 文件获取:

var express = require( 'express' );

// we use express as app framework
var app = express();

/** mixMovie expects a post with the following parameters:
  * @param 'data' the wav file to mux together with the movie 
  */
app.post( '/mixMovie', function( request, response ){

    var audioFile = request.files.data.path;
    ....

} );

希望这有帮助..

乔纳森