首頁猿問 javascript如何上傳blob？

javascript如何上傳blob？

JavaScript JQuery Html5

繁星淼淼 2019-07-24 10:04:21

javascript如何上傳blob？我在這個結構中有一個blob數據：Blob {type: "audio/wav", size: 655404, slice: function}size: 655404type: "audio/wav"__proto__: Blob它實際上是使用最近的Chrome getUerMedia()和Recorder.js記錄的聲音數據如何使用jquery的post方法將此blob上傳到服務器？我沒試過就試過這個： $.post('http://localhost/upload.php', { fname: "test.wav", data: soundBlob }, function(responseText) { console.log(responseText); });

查看完整描述

3 回答

PIPIONE

TA貢獻1829條經驗獲得超9個贊

試試這個

var fd = new FormData();fd.append('fname', 'test.wav');fd.append('data', soundBlob);$.ajax({
    type: 'POST',
    url: '/upload.php',
    data: fd,
    processData: false,
    contentType: false}).done(function(data) {
       console.log(data);});

您需要使用FormData API并設置jQuery.ajax's processData和contentTypeto false。

反對回復 2019-07-24

函數式編程

TA貢獻1807條經驗獲得超9個贊

我無法使用上面的示例來處理blob，我想知道upload.php到底是什么。所以你走了：

（僅在Chrome 28.0.1500.95中測試過）

// javascript function that uploads a blob to upload.phpfunction uploadBlob(){
    // create a blob here for testing
    var blob = new Blob(["i am a blob"]);
    //var blob = yourAudioBlobCapturedFromWebAudioAPI;// for example   
    var reader = new FileReader();
    // this function is triggered once a call to readAsDataURL returns
    reader.onload = function(event){
        var fd = new FormData();
        fd.append('fname', 'test.txt');
        fd.append('data', event.target.result);
        $.ajax({
            type: 'POST',
            url: 'upload.php',
            data: fd,
            processData: false,
            contentType: false
        }).done(function(data) {
            // print the output from the upload.php script
            console.log(data);
        });
    };      
    // trigger the read from the reader...
    reader.readAsDataURL(blob);}

upload.php的內容：

<?// pull the raw binary data from the POST array$data = substr($_POST['data'], strpos($_POST['data'], ",") + 1);// decode it$decodedData = base64_decode($data);// print out the raw data, echo ($decodedData);$filename = "test.txt";// write the data out to the file$fp = fopen($filename, 'wb');fwrite($fp, $decodedData);fclose($fp);?>

反對回復 2019-07-24

米琪卡哇伊

TA貢獻1998條經驗獲得超6個贊

實際上，您不必使用從JavaScript FormData發送Blob到服務器（File也是a Blob）。

jQuery示例：

var file = $('#fileInput').get(0).files.item(0); // instance of File$.ajax({
  type: 'POST',
  url: 'upload.php',
  data: file,
  contentType: 'application/my-binary-type', // set accordingly
  processData: false});

Vanilla JavaScript示例：

var file = $('#fileInput').get(0).files.item(0); // instance of Filevar xhr = new XMLHttpRequest();xhr.open('POST', '/upload.php', true);xhr.onload = function(e) { ... };xhr.send(file);

當然，如果您使用“AJAX”實現替換傳統的HTML多部分表單（即，您的后端使用多部分表單數據），您希望使用FormData另一個答案中描述的對象。

來源：XMLHttpRequest2中的新技巧| HTML5 Rocks

反對回復 2019-07-24

3 回答
0 關注
1386 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

javascript如何上傳blob？

javascript如何上傳blob？

3 回答

添加回答

javascript如何上傳blob？