কিভাবে জাভাস্ক্রিপ্ট একটি ব্লব আপলোড করতে পারেন?

Question

এই কাঠামোটিতে আমার একটি ব্লব ডেটা রয়েছে:

Blob {type: "audio/wav", size: 655404, slice: function}
size: 655404
type: "audio/wav"
__proto__: Blob

এটি আসলে সাম্প্রতিক ক্রোম getUerMedia()এবং রেকর্ডার.জেগুলি ব্যবহার করে রেকর্ড করা সাউন্ড ডেটা

আমি কীভাবে jquery এর পোস্ট পদ্ধতি ব্যবহার করে এই ব্লবটি সার্ভারে আপলোড করতে পারি? আমি কোনও ভাগ্য ছাড়াই এটি চেষ্টা করেছি:

   $.post('http://localhost/upload.php', { fname: "test.wav", data: soundBlob }, 
    function(responseText) {
           console.log(responseText);
    });

Comments

আপনি এটির জন্য বাইনারিজেএস ব্যবহার করার বিষয়ে ভাবতে চাইতে পারেন। আপনি যদি ডেটা স্ট্রিমিং করে থাকেন তবে এটি কৌশলটি করতে পারে।

— toxicate20

এই উত্তরটি পাশাপাশি খুব বিস্তারিত is stackoverflow.com/a/8758614/1331430

— ফাবৃকীয় ম্যাট

Answer 1

এটা চেষ্টা কর

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 এপিআই এবং সেট jQuery.ajaxএর processDataএবং contentTypeকরতে false।

Comments

আপনি কীভাবে এজেএক্স ছাড়াই এটি করবেন তা জানেন?

— উইলিয়াম এন্টারিকেন

@ ফুলডিসেন্ট ব্যবহারকারীকে ফাইল এপিআই ব্যবহার করে কোনও ফাইল ডাউনলোড করতে অনুরোধ করবেন? বা শুধু ব্লব বিষয়বস্তু সংরক্ষণ করতে?

— ফ্যাব্রিসিও ম্যাট é

মূলত করতে$('input[type=file]').value=blob

— উইলিয়াম এন্টারিকেন

: নিরাপত্তা প্রয়োজনীয়তা ফাইল ইনপুট মান কর্মসূচি সেটিং প্রতিরোধ stackoverflow.com/questions/1696877/...

— yeeking

নোট করুন যে কোনও ব্লবের ফাইলের বিপরীতে সার্ভারে প্রেরণের সময় একটি জেনেরিক ফাইলের নাম থাকে। : কিন্তু আপনি FormData মধ্যে ব্লব ফাইলের নাম speficy করতে stackoverflow.com/questions/6664967/...

— সেবাস্টিয় Lorber

Answer 2

আপনার জাভাস্ক্রিপ্ট (এবং একটি) থেকে সার্ভারে FormDataএকটি প্রেরণ করতে আসলে ব্যবহার করতে হবে নাBlobFile এটিও একটি 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
});

ভ্যানিলা জাভাস্ক্রিপ্ট উদাহরণ:

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

মঞ্জুর, আপনি যদি একটি "এজেএক্স" প্রয়োগকরণের সাথে ,তিহ্যবাহী এইচটিএমএল মাল্টিপার্ট ফর্মটি প্রতিস্থাপন করে থাকেন (যা আপনার ব্যাক-এন্ডটি মাল্টিপার্ট ফর্ম ডেটা গ্রহণ করে), আপনি এটি ব্যবহার করতে চান FormData অন্য উত্তরে বর্ণিত হিসাবে অবজেক্টটি ।

উত্স: এক্সএমএলএইচটিপিআরকোয়েস্ট 2 এ নতুন কৌশল এইচটিএমএল 5 রকস

Answer 3

ব্লবসের সাথে কাজ করার জন্য আমি উপরের উদাহরণটি পাই না এবং আপলোড.এফপি-তে ঠিক কী আছে তা জানতে চেয়েছিলাম। সুতরাং আপনি এখানে যান:

(কেবলমাত্র Chrome 28.0.1500.95 এ পরীক্ষা করা হয়েছে)

// javascript function that uploads a blob to upload.php
function 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);

}

আপলোড.এফপি এর বিষয়বস্তু:

<?
// 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);
?>

Comments

আমি প্রায় নিশ্চিত করুন যে আপনি লাইন পরিবর্তন করতে পারেন আছি data: fd,মধ্যে ajaxথেকে ফাংশন কল data: blob,।

— কেনি এভিট 21

Answer 4

আমি ফর্মডাটা ব্যবহার না করে ব্লবটি স্থানান্তর করার জন্য জাভাস্ক্রিপ্ট অবজেক্ট ব্যবহার করে কাজ করতে উদাহরণস্বরূপ @ আইকিং পেতে সক্ষম হয়েছি। রেকর্ডার.জেএস ব্যবহার করে তৈরি করা একটি সাউন্ড ব্লব দিয়ে কাজ করে। ক্রোম সংস্করণ 32.0.1700.107 এ পরীক্ষিত

function uploadAudio( blob ) {
  var reader = new FileReader();
  reader.onload = function(event){
    var fd = {};
    fd["fname"] = "test.wav";
    fd["data"] = event.target.result;
    $.ajax({
      type: 'POST',
      url: 'upload.php',
      data: fd,
      dataType: 'text'
    }).done(function(data) {
        console.log(data);
    });
  };
  reader.readAsDataURL(blob);
}

আপলোড.এফপি এর বিষয়বস্তু

<?
// 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,
$filename = $_POST['fname'];
echo $filename;
// write the data out to the file
$fp = fopen($filename, 'wb');
fwrite($fp, $decodedData);
fclose($fp);
?>

Comments

পিএইচপি ফাইলে সতর্কতা অবলম্বন করুন - যদি আপনি এইচটিটিপি ক্লায়েন্টকে ফাইলের নাম সেট করার অনুমতি দেন তবে তারা তাদের পছন্দসই ফাইল এবং ডিরেক্টরিতে দূষিত সামগ্রী আপলোড করতে এটি ব্যবহার করতে পারে। (এতক্ষণ আপাচি সেখানে লিখতে পারে)

— 14

Answer 5

2019 আপডেট

এটি সর্বশেষতম আনয়ন API এর সাথে উত্তরগুলি আপডেট করে এবং jQuery প্রয়োজন নেই।

দাবি অস্বীকার: আইই, অপেরা মিনি এবং পুরানো ব্রাউজারগুলিতে কাজ করে না। ক্যানিউজ দেখুন ।

বেসিক আনুন

এটি এতটা সহজ হতে পারে:

  fetch(`https://example.com/upload.php`, {method:"POST", body:blobData})
                .then(response => console.log(response.text()))

ত্রুটি পরিচালনার সাথে আনুন

ত্রুটি হ্যান্ডলিং যোগ করার পরে, এটি দেখতে পারে:

fetch(`https://example.com/upload.php`, {method:"POST", body:blobData})
            .then(response => {
                if (response.ok) return response;
                else throw Error(`Server returned ${response.status}: ${response.statusText}`)
            })
            .then(response => console.log(response.text()))
            .catch(err => {
                alert(err);
            });

পিএইচপি কোড

এটি আপলোড.এফপি-র সার্ভার-সাইড কোড।

<?php    
    // gets entire POST body
    $data = file_get_contents('php://input');
    // write the data out to the file
    $fp = fopen("path/to/file", "wb");

    fwrite($fp, $data);
    fclose($fp);
?>

Answer 6

আমি উপরের সমস্ত সমাধান এবং অতিরিক্ত হিসাবে, সম্পর্কিত উত্তরগুলিতে চেষ্টা করেছি। এইচটিএমএল ইনপুটএলিমেন্টের ফাইল সম্পত্তিটিতে ব্লবটি ম্যানুয়ালি পাস করার মধ্যে সলিউশনগুলি, ফাইলআরেডারে সমস্ত রিডএএস * পদ্ধতি কল করে, একটি ফর্ম্যাডাটা.অ্যাপেন্ড কলের জন্য দ্বিতীয় যুক্তি হিসাবে একটি ফাইল উদাহরণ ব্যবহার করে, ব্ল্রব ডেটা স্ট্রিং হিসাবে স্ট্রিং হিসাবে পাওয়ার চেষ্টা করে ইউআরএল।

এখন, যদি আপনি সেগুলি বা আরও চেষ্টা করে দেখেন এবং এখনও আপনার ব্লব আপলোড করতে অক্ষম হন তবে এর অর্থ সমস্যাটি সার্ভার-সাইড। আমার ক্ষেত্রে, আমার ব্লবটি পিএইচপি.আইএনআই-তে http://www.php.net/manual/en/ini.core.php#ini.upload-max-filesize এবং post_max_size সীমা অতিক্রম করেছে তাই ফাইলটি সামনের প্রান্তটি ছেড়ে যাচ্ছে ফর্ম কিন্তু সার্ভার দ্বারা প্রত্যাখ্যাত হচ্ছে। আপনি হয় এই মানটি সরাসরি পিএইচপি.আইএনআই বা হিট্যাক্সেসের মাধ্যমে বাড়াতে পারেন