programing

파일 생성을 위해 BLOB를 Ajax를 통해 전달

topblog 2023. 7. 27. 21:32
반응형

파일 생성을 위해 BLOB를 Ajax를 통해 전달

저는 오디오 레코더(https://github.com/cwilso/AudioRecorder) 를 캡처하고 Ajax를 통해 BLOB를 php 파일로 보내려고 합니다. 그러면 BLOB 콘텐츠를 수신하고 파일(이 경우 웨이브 파일)을 만들 것입니다.

Ajax 전화:

audioRecorder.exportWAV(function(blob) {
      var url = (window.URL || window.webkitURL).createObjectURL(blob);
      console.log(url);
      var filename = <?php echo $filename;?>;
      $.ajaxFileUpload({
        url :  "lib/vocal_render.php",
        secureuri      :false,
        dataType : blob.type,
        data: blob,
        success: function(data, status) {
          if(data.status != 'error')
            alert("boa!");
        }
      });
    }); 

그리고 내 php 파일(http_php.sys):

<?php 

if(!empty($_POST)){
    $data = implode($_POST); //transforms the char array with the blob url to a string
    $fname = "11" . ".wav";

    $file = fopen("../ext/wav/testes/" .$fname, 'w');
    fwrite($file, $data);
    fclose($file);
}?>

추신: 저는 블롭과 아약스가 있는 초보자입니다.잘 부탁드립니다.

파일을 양식 데이터로 업로드해 보십시오.

audioRecorder.exportWAV(function(blob) {

      var url = (window.URL || window.webkitURL).createObjectURL(blob);
      console.log(url);

      var filename = <?php echo $filename;?>;
      var data = new FormData();
      data.append('file', blob);

      $.ajax({
        url :  "lib/vocal_render.php",
        type: 'POST',
        data: data,
        contentType: false,
        processData: false,
        success: function(data) {
          alert("boa!");
        },    
        error: function() {
          alert("not so boa!");
        }
      });
}); 

.

<?php 

if(isset($_FILES['file']) and !$_FILES['file']['error']){
    $fname = "11" . ".wav";

    move_uploaded_file($_FILES['file']['tmp_name'], "../ext/wav/testes/" . $fname);
}
?>

설명서에 따르면, 다음을 사용하여XMLHttpRequest.send()사용할 수 있습니다.Blob정면으로 반대하다

var blob = new Blob(chunks, { 'type' : 'audio/webm' });
var xhr = new XMLHttpRequest();
xhr.open('POST', '/speech', true);
xhr.onload = function(e) {
  console.log('Sent');
};
xhr.send(blob);

저는 이것을 먹어봤는데, 그것은 매력적으로 작동합니다.

AJAX를 호출하고 Laravel 블레이드에서 다운로드할 CSV 파일을 생성하려면 다음과 같이 하십시오.

<button type="button" class="btn btn-primary" id="download-btn">Download</button>
<script>
    $(document).on('click', '#download-btn', function(e) {
        e.preventDefault();
        $.ajax({
            "url": "{{ config('app.api_link').'/import/lc-register-report?download=yes' }}",
            "type": "POST",
            xhrFields:{
                responseType: 'blob'
            },
            data: { },
            headers: {
                'Authorization': "Bearer {{ Session::get('authorization_token') }}"
            },
            success: function(response) 
            {
                var data = new Blob([response], {type: 'application/vnd.ms-excel'}); // csv = 'text/csv'
                var csvURL = window.URL.createObjectURL(data);
                const tempLink = document.createElement('a');
                tempLink.href = csvURL;
                tempLink.setAttribute('download', 'transaction-report.xls'); // csv = '.csv'
                tempLink.click();
            }
        });
    });
</script>

언급URL : https://stackoverflow.com/questions/19015555/pass-blob-through-ajax-to-generate-a-file

반응형