Javascript Blob保存到变量

时间:2013-03-28 22:08:20

标签: javascript file-upload blob

我正在使用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的内容并将其发送到服务器?

任何帮助表示感谢。

1 个答案:

答案 0 :(得分:2)

您可以向FormData添加blob,例如formData.append('thename', theblob);