[英]javascript / PHP file upload
我正在從這個地方使用錄音機
http://webaudiodemos.appspot.com/AudioRecorder/index.html ,
但是我想將其上傳回服務器,而不是將文件保存在本地。 我最好的嘗試是嘗試修改recording.js腳本中的Recorder.setupDownload函數,以將其創建的blob傳遞給我在這里找到的簡單的上傳PHP腳本:
<?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.js中定義blob的方式:
worker.onmessage = function(e){
var blob = e.data;
currCallback(blob);
}
據我了解,它是使用recorderWorker.js(注釋鏈接)中列出的方法創建的,並且應該只包含一個wav文件。
我不認為您應該在worker中創建blob,但是我有一個類似的設置(實際上基於同一示例),在其中我從worker中檢索了樣本緩沖區並將其保存到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;
....
} );
希望這可以幫助..
喬納森
最后,這對我很好:
recorder.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);
}
?>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.