कैसे जावास्क्रिप्ट एक बूँद अपलोड कर सकते हैं?

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

आप इसके लिए बाइनरीजेएस का उपयोग करने के बारे में सोचना चाह सकते हैं। यदि आप डेटा स्ट्रीमिंग कर रहे हैं, तो यह चाल हो सकती है।

— टोक्सीप्ट 20

यह उत्तर बहुत ही विस्तृत है। 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

क्या आपको पता है कि AJAX के बिना भी यह कैसे करना है?

— विलियम एंट्रीकेन

@FullDecent तुम्हारा क्या मतलब है? फ़ाइल एपीआई का उपयोग करके उपयोगकर्ता को फ़ाइल डाउनलोड करने के लिए संकेत देने के लिए? या सिर्फ बूँद कंटेंट को स्टोर करने के लिए?

— फेब्रीसियो मैटे

मूल रूप से करने के लिए$('input[type=file]').value=blob

— विलियम एंट्रिएन

सुरक्षा आवश्यकताओं को फ़ाइल इनपुट मानों की प्रोग्रामेटिक सेटिंग को रोकें: stackoverflow.com/questions/1696877/…

— 12:15 बजे

ध्यान दें कि जब फ़ाइल के विपरीत, सर्वर पर भेजा जाता है तो ब्लॉब का एक सामान्य फ़ाइल नाम होता है। लेकिन आप फॉर्मडाटा में बूँद फ़ाइल नाम को स्‍पाइसी कर सकते हैं: stackoverflow.com/questions/6664967/…

— सेबेस्टियन

Answer 2

आपको वास्तव में जावास्क्रिप्ट से सर्वर FormDataभेजने के लिए उपयोग करने की आवश्यकता नहीं है Blob(और Fileयह भी एक है 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);

दी गई है, यदि आप "AJAX" कार्यान्वयन के साथ पारंपरिक HTML मल्टीपर्ट फॉर्म की जगह ले रहे हैं (यानी, आपका बैक-एंड मल्टीपर्ट फॉर्म डेटा की खपत करता है), तो आप FormDataएक अन्य उत्तर में वर्णित ऑब्जेक्ट का उपयोग करना चाहते हैं ।

सोर्स: XMLHttpRequest2 में नई ट्रिक्स | एचटीएमएल 5 रॉक्स

Answer 3

मुझे ब्लब्स के साथ काम करने के लिए उपरोक्त उदाहरण नहीं मिला और मैं जानना चाहता था कि अपलोड में क्या है। तो यहाँ तुम जाओ:

(केवल 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);

}

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

Comments

मुझे पूरा यकीन है कि आप फ़ंक्शन कॉल data: fd,में लाइन को बदल सकते हैं । ajaxdata: blob,

— केनी एविट

Answer 4

मैं FormData का उपयोग करके नहीं बल्कि बूँद को स्थानांतरित करने के लिए जावास्क्रिप्ट ऑब्जेक्ट का उपयोग करके काम करने के लिए @yeeking उदाहरण प्राप्त करने में सक्षम था। रिकॉर्डर .js का उपयोग करके बनाई गई ध्वनि बूँद के साथ काम करता है। क्रोम संस्करण 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

Php फ़ाइल में सावधानी - यदि आप HTTP क्लाइंट को फ़ाइल नाम सेट करने की अनुमति देते हैं, तो वे इसका उपयोग किसी फ़ाइल की दुर्भावनापूर्ण सामग्री और उनके चयन की निर्देशिका में अपलोड करने के लिए कर सकते हैं। (इसलिए जब तक अपाचे वहाँ लिख सकते हैं)

— yeeking

Answer 5

2019 अपडेट

यह नवीनतम Fetch API के साथ उत्तरों को अपडेट करता है और इसे jQuery की आवश्यकता नहीं है।

अस्वीकरण: IE, ओपेरा मिनी और पुराने ब्राउज़रों पर काम नहीं करता है। कैनिअस देखें ।

मूल लश

यह उतना ही सरल हो सकता है:

  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 कोड

यह upload.php में सर्वर-साइड कोड है।

<?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

मैंने उपरोक्त सभी समाधानों की कोशिश की और इसके अलावा, संबंधित उत्तरों में भी। सहित समाधान, लेकिन एक HTMLInputElement की फ़ाइल संपत्ति के लिए मैन्युअल रूप से blob पास करने तक सीमित नहीं है, सभी रीडर्स को कॉल करते हुए * FileReader पर विधियाँ, FormData.append कॉल के लिए दूसरे तर्क के रूप में फ़ाइल उदाहरण का उपयोग करके, बूँद द्वारा स्ट्रिंग के रूप में डेटा प्राप्त करने की कोशिश कर रहा है। URL.createObjectURL (myBlob) के मान जो खराब निकले और मेरी मशीन को क्रैश कर दिया।

अब, यदि आप उन या अधिक प्रयास करने के लिए होते हैं और अभी भी पाते हैं कि आप अपनी बूँद अपलोड करने में असमर्थ हैं, तो इसका मतलब यह हो सकता है कि समस्या सर्वर-साइड है। मेरे मामले में, मेरी ब्लॉब http://www.php.net/manual/en/ini.core.php#ini.upload-max-filesize और PHP_ini में post_max_size की सीमा पार कर गई थी, इसलिए फ़ाइल सामने के छोर को छोड़ रही थी फार्म लेकिन सर्वर द्वारा अस्वीकार कर दिया। आप या तो सीधे PHP.ini में या .htaccess के माध्यम से इस मान को बढ़ा सकते हैं