ইনপুট ফর্ম থেকে বেস 64 এনকোড ফাইল-ডেটা পান

Question 1

আমি একটি প্রাথমিক এইচটিএমএল ফর্ম পেয়েছি যা থেকে আমি ফায়ারবগে পরীক্ষা করছি এমন কিছু তথ্য গ্রহণ করতে পারি।

আমার একমাত্র সমস্যা হ'ল আমি সার্ভারে প্রেরণের আগে ফাইল ডেটা বেসড করার চেষ্টা করছি যেখানে এটি ফর্মটিতে থাকা উচিত ডেটাবেসে সংরক্ষণ করার জন্য।

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

আইই সাপোর্ট এর জন্য।

এটি ফায়ারফক্স, ক্রোম এবং সাফারিতে কাজ করে (তবে ফাইলটি সঠিকভাবে এনকোড করে না, বা কমপক্ষে এটি পোস্ট করার পরে ফাইলটি ঠিক আসে না)

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

এছাড়াও,

file.readAsArrayBuffer()

এইচটিএমএল 5 এ কেবল সমর্থিত বলে মনে হচ্ছে?

প্রচুর লোক প্রস্তাবিত: http://www.webtoolkit.info/javascript-base64.html

তবে এটি কেবলমাত্র ইউটিএফ_ 8 পদ্ধতিতে এন 64 এর কোডটি বেসড করার আগে ত্রুটি দেয়? (বা একটি খালি স্ট্রিং)

var encoded = Base64.encode(file);

Question 2

এটি ব্রাউজার-সাইড জাভাস্ক্রিপ্টে সম্পূর্ণ সম্ভব possible

সহজ উপায়:

ReadAsDataURL () পদ্ধতি ইতিমধ্যে আপনার জন্য করুন Base64- যেমন এনকোড পারে। আপনার সম্ভবত শুরুর জিনিসগুলি প্রথমে (প্রথম পর্যন্ত) বের করে ফেলতে হবে, তবে এটি কোনও বড় বিষয় নয়। এটি যদিও সমস্ত মজা নিতে হবে।

কঠিন পথে:

আপনি যদি এটিকে কঠোরভাবে চেষ্টা করতে চান (বা এটি কাজ করে না), দেখুন readAsArrayBuffer()। এটি আপনাকে একটি Uint8Array দেবে এবং আপনি নির্দিষ্ট পদ্ধতিটি ব্যবহার করতে পারেন। এটি সম্ভবত কেবল তখনই কার্যকর যখন আপনি নিজেরাই ডেটা নিয়ে গোলযোগ করতে চান যেমন আপনার চিত্র আপলোড করার আগে চিত্রের ডেটা ম্যানিপুলেট করা বা অন্য ভুডু যাদু করা।

দুটি পদ্ধতি আছে:

স্ট্রিংয়ে রূপান্তর করুন এবং অন্তর্নির্মিত btoaবা অনুরূপ ব্যবহার করুন
- আমি সমস্ত ক্ষেত্রে পরীক্ষা করে দেখিনি, তবে আমার জন্য কাজ করে - কেবল চর-কোডগুলি পান
কোনও Uint8Array থেকে সরাসরি বেস 64 এ রূপান্তর করুন

আমি সম্প্রতি ব্রাউজারে টার প্রয়োগ করেছি । এই প্রক্রিয়ার অংশ হিসাবে, আমি আমার নিজের সরাসরি Uint8Array-> বেস 64 বাস্তবায়ন করেছি। আমি মনে করি না যে আপনার এটির প্রয়োজন হবে তবে আপনি যদি একবার দেখতে চান তবে এটি এখানে রয়েছে ; এটা বেশ ঝরঝরে।

আমি এখন কি করব:

একটি Uint8Array থেকে স্ট্রিংয়ে রূপান্তর করার কোডটি খুব সহজ (যেখানে বুফটি 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));

বেস 64 এখন একটি বেস 64-এনকোডেড স্ট্রিং হবে এবং এটি কেবল পীচি আপলোড করা উচিত। আপনি যদি চাপ দেওয়ার আগে ডাবল চেক করতে চান তবে এটি চেষ্টা করুন:

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

এটি ফাইল হিসাবে এটি ডাউনলোড করবে।

অন্যান্য তথ্য:

Uint8Araray হিসাবে ডেটা পেতে, MDN ডক্সটি দেখুন:

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

Question 3

আমার সমাধানটি ব্যবহার করা হয়েছিল 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');
    };
}

Question 4

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

$(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();
});

Question 5

এটির সাথে লড়াই করার পরে, আমি ব্রাউজারগুলি (ক্রোম, ফায়ারফক্স এবং এখনও অপ্রকাশিত সাফারি)) সমর্থন করে এমন একটি পিএইচপি স্ক্রিপ্ট প্রয়োগ করেছি, যা অন্যের জন্য বেস 64-এনকোডড ডেটা হিসাবে পোস্ট করা ফাইল ডেটা প্রতিধ্বনিত করে ব্রাউজারগুলি।

Question 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)

Question 7

আমি ভাবতে শুরু করেছি যে আজাক্স শৈলীর আপলোডের জন্য 'iframe' ব্যবহার করা আমার পরিস্থিতির জন্য এইচটিএমএল 5 সম্পূর্ণ বৃত্ত না আসা পর্যন্ত আমার পক্ষে আরও ভাল পছন্দ হতে পারে এবং আমার অ্যাপ্লিকেশনটিতে লিগ্যাসি ব্রাউজারগুলিকে সমর্থন করতে হবে না!