我正在使用https://github.com/cwilso/AudioRecorder,除了获取blob并将其发送到服务器之外,一切正常。我有以下将表单数据发送到服务器。基本上,在客户端生成一个wav文件,然后将其存储在blob中,我想找到一种方法来获取该blob的内容。
$('#submit').click(function(){
var formData = new FormData($('#add_slide').get(0));
var jContent = $( "#main_container" );
//console.log(formData);
if($('#audio_file').val().length==0)
{
var blob_url = $('#blob_url').val();
if($('#blob_url').val().length==0)
{
alert('Recording Could not be found. Please try again');
return false;
}else{
console.log(formData);
}
//return false;
}else{
var ext = $('#audio_file').val().split('.').pop().toLowerCase();
if(ext!== 'wav') {
alert('Invalid File. Please use a file with extension WAV!');
return false;
}
}
$.ajax({
url: 'lec_add_slide.php', //server script to process data
type: 'POST',
xhr: function() { // custom xhr
myXhr = $.ajaxSettings.xhr();
if(myXhr.upload){ // check if upload property exists
myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // for handling the progress of the upload
//console.log('OK');
}else{
//console.log('NOT');
}
return myXhr;
},
//Ajax events
beforeSend: function (){
$('#loadingModal').modal('show');
},
success: function (data) {
jContent.html( data );
$('#loadingModal').modal('hide');
},
error: function (){
console.log('error');
},
// Form data
data: formData,
//Options to tell JQuery not to process data or worry about content-type
cache: false,
contentType: false,
processData: false
});
});
function progressHandlingFunction(e){
if(e.lengthComputable){
$('#bar-progress-mp3').css('width',((e.loaded/e.total)*100)+'%');
}
}
如果我使用常规文件输入发送常规文件,一切都很完美。我已将blob url放在隐藏的输入字段中,我也尝试了blob.slice()但到达服务器的只是对象Blob。 有谁知道如何获取blob URL的内容并将其发送到服务器?
任何帮助表示感谢。
答案 0 :(得分:2)
您可以向FormData
添加blob,例如formData.append('thename', theblob);