的JavaScript/PHP文件上傳

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

但我不是保存該文件在本地，我想將其上傳到服務器。我最好的拍攝是試圖修改Recorder.setupDownload功能recording.js腳本，它創建的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被定義：

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

至於我的理解它與（在recorderWorker.js列出的方法創建鏈接註釋），它應該只包含一個wav文件。

來源

2014-03-28 user3473976

要確定是否somethign了錯誤，你應該用你的Ajax調用成功和錯誤的方法。即成功：功能（數據）{/ *做一些與數據* /} - 我個人更喜歡從我的PHP腳本內輸出json。即{「錯誤」：{「文件」：「文件太大」}} - 那麼你只是檢查是否存在錯誤，然後輸出errors.file – skrilled

它似乎你並沒有實際發送文件，因爲你沒有提供一個包含文件名，元素或實際文件的參數 – aelgoa

blob中的內容是什麼？ –

我不認爲你應該在worker中創建blob，但是我有一個類似的設置（實際上基於同一個例子），我從worker中檢索了samplebuffers，並將它們保存到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 
    }); 
}

，我不得不運行的節點服務器裏斑被送往並且可以直接拿起作爲一個wav文件，使用express節點模塊：

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; 
    .... 

});

希望這有助於..

喬納森

來源

2014-03-29 14:43:14

只是一個細節，你的意思是node.js與「節點服務器」？你可以發佈一個例子或提示嗎？ – user3473976

是的，我的意思是node.js - 添加到答案 –

到底這個工作很好地對我說：

記錄。JS：

$.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); 

} 
?>

來源

2014-04-21 01:12:59 user3473976

的JavaScript/PHP文件上傳

回答

相關問題