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

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

Moderator: mindphp

ภาพประจำตัวสมาชิก
fonfonn
PHP VIP Members
PHP VIP Members
โพสต์: 4983
ลงทะเบียนเมื่อ: 11/07/2022 9:28 am

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

โพสต์ที่ยังไม่ได้อ่าน โดย fonfonn »

สอบถามการใช้งานการ รับไฟล์ PDF ไป เว็บเซอร์วิส โดยเรามีการรับไฟล์ PDF จากหน้า HTML และจะทำการส่งไปยังเว็บเซอร์วิสเพื่อจะทำการแปลงไฟล์ ส่วนนี้ถ้ารับฟอร์มเป็นไฟล์ ต้องมีการแปลงไฟล์เป็น base64 ก่อนเพื่อส่ง request ไปที่ API จึงอยากสอบถามการแปลงไฟล์เป็น base64 สามารถทำแบบไหนได้ หรือมีตัวอย่างการใช้งานไหมคะ
you're the only one treasure💎
ภาพประจำตัวสมาชิก
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
โพสต์: 41131
ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
ติดต่อ:

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

โพสต์ที่ยังไม่ได้อ่าน โดย mindphp »

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

โค้ด: เลือกทั้งหมด

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

โค้ด: เลือกทั้งหมด

<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 ของไฟล์เราตรงๆ

แปลงกลับ

โค้ด: เลือกทั้งหมด

<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
ตอบกลับโพส
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 40