बेस 64 को इनपुट फॉर्म से फाइल-डेटा प्राप्त करें

Question

मुझे एक मूल HTML फॉर्म मिला है जिसमें से मैं थोड़ी सी जानकारी ले सकता हूं जिसे मैं फायरबग में जांच रहा हूं।

मेरा एकमात्र मुद्दा यह है कि मैं सर्वर पर भेजे जाने से पहले फ़ाइल डेटा को बेस 64 में एनकोड करने का प्रयास कर रहा हूं , जहां डेटाबेस को सहेजने के लिए उस रूप में होना आवश्यक है।

<input type="file" id="fileupload" />

और जावास्क्रिप्ट + jQuery में:

var file = $('#fileupload').attr("files")[0];

मेरे पास कुछ उपलब्धियाँ हैं जो कि उपलब्ध जावास्क्रिप्ट पर आधारित हैं: .getAsBinary (), .getAsText (), .getAsTextURL।

हालाँकि, इनमें से कोई भी उपयोग करने योग्य पाठ वापस नहीं करता है, क्योंकि उन्हें अनुपयोगी 'वर्ण' सम्मिलित किए जा सकते हैं - मैं नहीं चाहता कि मेरी फ़ाइल अपलोड में कोई 'पोस्टबैक' हो, और मुझे विशिष्ट वस्तुओं को लक्षित करने वाले कई रूपों की आवश्यकता है इसलिए यह महत्वपूर्ण है फ़ाइल प्राप्त करें और इस तरह जावास्क्रिप्ट का उपयोग करें।

मुझे फ़ाइल को इस तरह से कैसे प्राप्त करना चाहिए कि मैं जावास्क्रिप्ट बेस 64 एनकोडर में से एक का उपयोग कर सकता हूं जो व्यापक रूप से उपलब्ध हैं !?

धन्यवाद

अद्यतन - यहाँ बाउंटी शुरू करने, क्रॉस ब्राउज़र समर्थन की आवश्यकता है !!!

यहाँ मैं यहाँ हूँ:

<input type="file" id="fileuploadform" />

<script type="text/javascript">
var uploadformid = 'fileuploadform';
var uploadform = document.getElementById(uploadformid);


/* method to fetch and encode specific file here based on different browsers */

</script>

क्रॉस ब्राउज़र समर्थन के साथ मुद्दों की जोड़ी:

var file = $j(fileUpload.toString()).attr('files')[0];
fileBody = file.getAsDataURL(); // only would works in Firefox

इसके अलावा, IE समर्थन नहीं करता है:

var file = $j(fileUpload.toString()).attr('files')[0];

इसलिए मुझे इसके साथ प्रतिस्थापित करना होगा:

var element = 'id';
var element = document.getElementById(id);

IE समर्थन के लिए।

यह फ़ायरफ़ॉक्स, क्रोम और, सफारी में काम करता है (लेकिन फ़ाइल को ठीक से एनकोड नहीं करता है, या कम से कम इसे पोस्ट करने के बाद फ़ाइल बाहर नहीं आती है)

var file = $j(fileUpload.toString()).attr('files')[0];
var encoded = Btoa(file);

इसके अलावा,

file.readAsArrayBuffer() 

केवल HTML5 में समर्थित माना जाता है?

बहुत से लोगों ने सुझाव दिया: http://www.webtoolkit.info/javascript-base64.html

लेकिन यह केवल बेस 64 एनकोड करने से पहले UTF_8 विधि पर एन एरर देता है? (या एक खाली स्ट्रिंग)

var encoded = Base64.encode(file); 

Comments

आप क्या अपलोड कर रहे हैं? पाठ डेटा या बाइनरी?

— बीटगैमिट

@tjamenson बाइनरी डेटा - कुछ भी वास्तव में 'वर्ड डॉक्यूमेंट' 'पीडीएफ' 'इमेज' आदि। मैं एक और वेरिएबल में फाइलनेम को असाइन करने जा रहा था, लेकिन मुझे आश्चर्य होने लगा कि क्या मेरी समझ में कुछ घातक दोष है जो इसके साथ संभव है अपलोड फ़ॉर्म और html - क्या यह विधि पूरी तरह से अनमोल है और इसे स्ट्रिंग के रूप में पोस्ट करके फ़ाइल डेटा प्रसारित करना संभव नहीं है? HTML5 के बिना जो मैं पढ़ रहा हूं उसके कुछ समाधान हैं -

— jordan.baucke

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

— विलियम वाल्सेथ

@William मैं डेटा को सुरक्षित करने की कोशिश नहीं कर रहा हूं, बस इसे सही प्रारूप में लाएं। Salesforce.com (एपेक्स प्लेटफ़ॉर्म) को डेटाबेस में रिकॉर्ड बनने से पहले डेटाबेस बेस 64-एनकोडेड की आवश्यकता होती है, फॉर्म के माध्यम से फाइल डेटा को बेस 64 एनकोड करने के लिए उनकी कार्यक्षमता बहुत खराब दस्तावेज है (मुझे पता है कि यह सवाल पूछने के बाद यह कैसे करना है)। वैसे भी, यह बेस64-एन्कोडिंग बाइनरी फाइल डेटा की तरह दिखता है, केवल HTML5 या मोज़िला फ़ाइल एपीआई

— jordan.baucke

ठीक है, अब मैं देखता हूं कि आपको इसकी आवश्यकता क्यों है। कोई मध्यवर्ती सर्वर + पागल बादल आवश्यकताओं + कोई क्रॉस ब्राउज़र समाधान = 1 गड़बड़। माफ़ करना।

— विलियम वाल्सेथ

Answer 1

यह ब्राउज़र-साइड जावास्क्रिप्ट में पूरी तरह से संभव है।

आसान तरीका:

ReadAsDataURL () पद्धति पहले से ही आप के लिए बेस 64 के रूप में यह सांकेतिक शब्दों में बदलना कर सकते हैं। आपको शायद शुरुआत के सामान (पहले तक) को बाहर निकालने की आवश्यकता होगी, लेकिन यह कोई बड़ी बात नहीं है। यह सब मज़ा हालांकि बाहर ले जाएगा।

मुश्किल रास्ता:

यदि आप इसे कठिन तरीके से आज़माना चाहते हैं (या यह काम नहीं करता है), तो देखें readAsArrayBuffer()। यह आपको Uint8Array देगा और आप निर्दिष्ट विधि का उपयोग कर सकते हैं। यह संभवत: केवल तभी उपयोगी है जब आप स्वयं डेटा में गड़बड़ करना चाहते हैं, जैसे कि छवि डेटा में हेरफेर करना या अपलोड करने से पहले अन्य जादू जादू करना।

दो तरीके हैं:

• स्ट्रिंग में कनवर्ट करें और अंतर्निहित btoaया समान का उपयोग करें
  • मैंने सभी मामलों का परीक्षण नहीं किया है, लेकिन मेरे लिए काम करता है- बस चार-कोड प्राप्त करें
• सीधे Uint8Array से base64 में कनवर्ट करें

मैंने हाल ही में ब्राउज़र में टार को लागू किया है । उस प्रक्रिया के हिस्से के रूप में, मैंने अपना खुद का सीधा Uint8Array-> base64 कार्यान्वयन किया। मुझे नहीं लगता कि आपको इसकी आवश्यकता होगी, लेकिन यदि आप एक नज़र रखना चाहते हैं तो यह यहाँ है ; यह बहुत साफ है।

मैं अभी क्या करता हूं:

Uint8Array से स्ट्रिंग में परिवर्तित करने के लिए कोड बहुत सरल है (जहां buf एक Uint8Array है):

function uint8ToString(buf) {
    var i, length, out = '';
    for (i = 0, length = buf.length; i < length; i += 1) {
        out += String.fromCharCode(buf[i]);
    }
    return out;
}

वहाँ से, बस करो:

var base64 = btoa(uint8ToString(yourUint8Array));

Base64 अब एक base64- एन्कोडेड स्ट्रिंग होगा, और इसे बस आड़ू अपलोड करना चाहिए। यदि आप पुश करने से पहले दोबारा जांच करना चाहते हैं तो यह कोशिश करें:

window.open("data:application/octet-stream;base64," + base64);

यह इसे एक फाइल के रूप में डाउनलोड करेगा।

अन्य सूचना:

Uint8Array के रूप में डेटा प्राप्त करने के लिए, MDN डॉक्स देखें:

• https://developer.mozilla.org/en/DOM/FileReader

Comments

महान - मुझे लगा कि readAsArrayBuffer()आउटपुट सही base64 डेटा की तरह लग रहा है , लेकिन यह स्ट्रिंग के भीख मांगने के कारण प्रक्रिया नहीं करेगा - मैं इसे अभी एक शॉट दूंगा!

— jordan.baucke 15

readAsArrayBuffer () क्रोम / सफारी में मौजूद नहीं लगता है और मैं मान रहा हूं कि अन्य ब्राउज़रों में समस्याग्रस्त होने जा रहा है ~ क्या मैं इन अन्य ब्राउज़रों में एक समान उपयोग कर सकता हूं?

— jordan.baucke

createObjectURL () <- यह आशाजनक लग रहा है कि मैं इसे लागू करने की कोशिश करूंगा, लेकिन मुझे यकीन है कि IE को एक 3 पहिया

— jordan.baucke

क्या आपके डाउनलोड समाधान को निष्पादित करने से पहले फ़ाइल नाम निर्दिष्ट करना संभव है?

— .मेगा

@ Amega - नहीं। यह सब बाइनरी स्ट्रीम डाउनलोड करता है। फ़ाइल नाम निर्दिष्ट करने का कोई तरीका (AFAIK) नहीं है। कुछ ब्राउज़र हालांकि एक विस्तार का अनुमान लगाते हैं। फ़ाइल नाम प्राप्त करने के लिए, आपको फिर से अपलोड करना होगा।

— बीटगैमाइट

Answer 2

मेरा समाधान उपयोग readAsBinaryString()और btoa()उसके परिणाम पर था ।

uploadFileToServer(event) {
    var file = event.srcElement.files[0];
    console.log(file);
    var reader = new FileReader();
    reader.readAsBinaryString(file);

    reader.onload = function() {
        console.log(btoa(reader.result));
    };
    reader.onerror = function() {
        console.log('there are some problems');
    };
}

Comments

अब तक सबसे आसान तरीका है, यह अधिक वोट क्यों नहीं है?

— sarink

Answer 3

मैंने किसी भी अजाक्स अनुरोध का उपयोग नहीं करते हुए फ़ाइल अपलोड बटन पर क्लिक करने के लिए छवि प्रदर्शित करने के लिए FileReader का उपयोग किया। निम्नलिखित कोड आशा है कि यह कुछ मदद कर सकता है।

$(document).ready(function($) {
    $.extend( true, jQuery.fn, {        
        imagePreview: function( options ){          
            var defaults = {};
            if( options ){
                $.extend( true, defaults, options );
            }
            $.each( this, function(){
                var $this = $( this );              
                $this.bind( 'change', function( evt ){

                    var files = evt.target.files; // FileList object
                    // Loop through the FileList and render image files as thumbnails.
                    for (var i = 0, f; f = files[i]; i++) {
                        // Only process image files.
                        if (!f.type.match('image.*')) {
                        continue;
                        }
                        var reader = new FileReader();
                        // Closure to capture the file information.
                        reader.onload = (function(theFile) {
                            return function(e) {
                                // Render thumbnail.
                                    $('#imageURL').attr('src',e.target.result);                         
                            };
                        })(f);
                        // Read in the image file as a data URL.
                        reader.readAsDataURL(f);
                    }

                });
            });
        }   
    });
    $( '#fileinput' ).imagePreview();
});

Answer 4

अपने आप से संघर्ष करने के बाद, मैं उन ब्राउज़र के लिए FileReader को कार्यान्वित करने के लिए आया हूं जो इसका समर्थन करते हैं (क्रोम, फ़ायरफ़ॉक्स और जैसा कि अभी तक अप्रकाशित सफारी 6), और एक PHP स्क्रिप्ट जो अन्य के लिए बेस 64-एन्कोडेड डेटा के रूप में POSTed फ़ाइल डेटा को वापस लाती है। ब्राउज़रों।

Answer 5

मैंने सोचना शुरू कर दिया है कि अजाक्स शैली के अपलोड के लिए 'iframe' का उपयोग करना मेरी स्थिति के लिए एक बेहतर विकल्प हो सकता है जब तक कि एचटीएमएल 5 पूर्ण चक्र में नहीं आता है और मुझे अपने ऐप में विरासत ब्राउज़रों का समर्थन करने की आवश्यकता नहीं है!

Comments

बस जिज्ञासु, आप बस [ webtoolkit.info/javascript-base64.html#] क्यों नहीं लेते हैं , और फिर टिप्पणी करते हैं input = Base64._utf8_encode(input);और output = Base64._utf8_decode(output);? Utf-8 रूपांतरण त्रुटि के अलावा कोई समस्या?

— SHR

@ मुझे नहीं पता कि प्रत्येक ब्राउज़र में इन विधियों में इनपुट के लिए बाइनरी फ़ाइल डेटा कैसे हड़पना है? $('#inputid').files[0](IE7 में काम नहीं करता है, जहां तक ​​मैं बता सकता हूं )। अगर यह इतना आसान था? var output = Base64.encode($('#inputid').files[0])??

— jordan.baucke

Answer 6

@ जोसेफ के उत्तर से प्रेरित:

const fileToBase64 = async (file) =>
  new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result)
    reader.onerror = (e) => reject(e)
  })

const file = event.srcElement.files[0];
const imageStr = await fileToBase64(file)