javascript/PHP文件上传

我用的是这个地方的录音机

,

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

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

所以我的问题是,

• 如何修改Recorder.setupDownload将文件上载到 指定文件夹
• 当出现问题时，如何报告

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

编辑：关于blob中的内容

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

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

$.ajax(
      {
       url: "./scripts/upload.php?id=" + Math.random(),
       type: "POST",
       data: fd,
       processData: false,
       contentType: false,
       success: function(data){
                    alert('Your message has been saved. \n Thank you :-)');
                } 
       });

---

据我所知，它是使用recorderWorker.js（注释中的链接）中列出的方法创建的，它应该只包含一个wav文件。

我认为不应该在worker中创建blob，但我有一个类似的设置（实际上基于相同的示例）在这里，我从worker检索了samplebuffers，并将它们保存到AudioMixer类的m_数据字段中，该类对录制做了一些工作，然后：

//! 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 node模块直接作为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;
    ....

} );

希望这有帮助

---

乔纳森

最后，这对我来说很好：

recorder.js：

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

$.ajax(
      {
       url: "./scripts/upload.php?id=" + Math.random(),
       type: "POST",
       data: fd,
       processData: false,
       contentType: false,
       success: function(data){
                    alert('Your message has been saved. \n Thank you :-)');
                } 
       });

以及上载脚本本身：

<?php
if(isset($_FILES['data']))
{   
    echo $_FILES['data']["size"];
    echo $_FILES['data']["type"];
    echo $_FILES['data']["tmp_name"];

    $name = date(YmdHis) . '.wav';

    move_uploaded_file($_FILES['data']["tmp_name"],"../DEST_FOLDER/" . $name);

}
?>

要确定是否有错误，您应该在ajax调用中使用success和error方法。i、 成功：函数（数据）{/*处理数据*/}——就个人而言，我更喜欢从php脚本中输出json。i、 e{“errors”：{“file”：“file is too big”}-然后您只需检查是否存在错误，然后输出错误。file您似乎没有实际发送文件，因为您没有提供包含文件名、元素或实际文件的参数。请参阅我的编辑。blob正在创建recorderWorker.js[2]：请只提供一个细节，您是指带有“节点服务器”的node.js吗？请你也发一个例子或提示好吗？