สอบถามการใช้ javascript แปลงไฟล์เป็น base64

พูดคุยแลกเปลี่ยน ปัญหา การเขียน JavaScript เครื่องมือ AJAX Web 2.0 AJAX Framework JQuery และ Node.JS รวมถึง Framework Express ของ Node.JS ทำงานฝั่ง Server

Moderator: mindphp

fonfonn
PHP Super Hero Member
PHP Super Hero Member
Posts: 842
Joined: 11/07/2022 9:28 am

สอบถามการใช้ javascript แปลงไฟล์เป็น base64

Post by fonfonn »

สอบถามการใช้งานการ รับไฟล์ PDF ไป เว็บเซอร์วิส โดยเรามีการรับไฟล์ PDF จากหน้า HTML และจะทำการส่งไปยังเว็บเซอร์วิสเพื่อจะทำการแปลงไฟล์ ส่วนนี้ถ้ารับฟอร์มเป็นไฟล์ ต้องมีการแปลงไฟล์เป็น base64 ก่อนเพื่อส่ง request ไปที่ API จึงอยากสอบถามการแปลงไฟล์เป็น base64 สามารถทำแบบไหนได้ หรือมีตัวอย่างการใช้งานไหมคะ
User avatar
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
Posts: 34793
Joined: 22/09/2008 6:18 pm
Contact:

Re: สอบถามการใช้ javascript แปลงไฟล์เป็น base64

Post by mindphp »

แปลงไฟล์ไปเป็น base64

Code: Select all

<input type="file" />

<script>
    // Get a reference to the file input
    const fileInput = document.querySelector('input');

    // Listen for the change event so we can capture the file
    fileInput.addEventListener('change', (e) => {
        // Get a reference to the file
        const file = e.target.files[0];

        // Encode the file using the FileReader API
        const reader = new FileReader();
        reader.onloadend = () => {
            console.log(reader.result);
            // Logs data:<type>;base64,wL2dvYWwgbW9yZ...
        };
        reader.readAsDataURL(file);
    });
</script>

Code: Select all

<input type="file" />

<script>
    // Get a reference to the file input
    const fileInput = document.querySelector('input');

    // Listen for the change event so we can capture the file
    fileInput.addEventListener('change', (e) => {
        // Get a reference to the file
        const file = e.target.files[0];

        // Encode the file using the FileReader API
        const reader = new FileReader();
        reader.onloadend = () => {
            // Use a regex to remove data url part
            const base64String = reader.result
                .replace('data:', '')
                .replace(/^.+,/, '');

            console.log(base64String);
            // Logs wL2dvYWwgbW9yZ...
        };
        reader.readAsDataURL(file);
    });
</script>
ตัวอย่างนี้ใช้ input ตัวเดียว ถ้าใช้จริงควรเป็น Selector เป็น input ของไฟล์เราตรงๆ

แปลงกลับ

Code: Select all

<input type="file" accept="image/*" />

<img src="" alt="" />

<script>
    // Get a reference to the file input
    const imageElement = document.querySelector('img');

    // Get a reference to the file input
    const fileInput = document.querySelector('input');

    // Listen for the change event so we can capture the file
    fileInput.addEventListener('change', (e) => {
        // Get a reference to the file
        const file = e.target.files[0];

        // Set file as image source
        imageElement.src = URL.createObjectURL(file);
    });
</script>
เปลี่ยนจากไฟล์ input เป็นค่าที่รับมาจาก response แทน

Ref: https://pqina.nl/blog/convert-a-file-to ... avascript/
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042
Post Reply
  • Similar Topics
    Replies
    Views
    Last post

Who is online

Users browsing this forum: Google [Bot] and 4 guests