สอบถามการใช้ javascript แปลงไฟล์เป็น base64
Moderator: mindphp
- fonfonn
- PHP VIP Members
- โพสต์: 4983
- ลงทะเบียนเมื่อ: 11/07/2022 9:28 am
สอบถามการใช้ javascript แปลงไฟล์เป็น base64
สอบถามการใช้งานการ รับไฟล์ PDF ไป เว็บเซอร์วิส โดยเรามีการรับไฟล์ PDF จากหน้า HTML และจะทำการส่งไปยังเว็บเซอร์วิสเพื่อจะทำการแปลงไฟล์ ส่วนนี้ถ้ารับฟอร์มเป็นไฟล์ ต้องมีการแปลงไฟล์เป็น base64 ก่อนเพื่อส่ง request ไปที่ API จึงอยากสอบถามการแปลงไฟล์เป็น base64 สามารถทำแบบไหนได้ หรือมีตัวอย่างการใช้งานไหมคะ
you're the only one treasure
- mindphp
- ผู้ดูแลระบบ MindPHP
- โพสต์: 41357
- ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
- ติดต่อ:
Re: สอบถามการใช้ javascript แปลงไฟล์เป็น base64
แปลงไฟล์ไปเป็น base64
ตัวอย่างนี้ใช้ input ตัวเดียว ถ้าใช้จริงควรเป็น Selector เป็น input ของไฟล์เราตรงๆ
แปลงกลับ
เปลี่ยนจากไฟล์ input เป็นค่าที่รับมาจาก response แทน
Ref: https://pqina.nl/blog/convert-a-file-to ... avascript/
โค้ด: เลือกทั้งหมด
<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 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>
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
ติดตาม 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
- ตอบกลับ
- แสดง
- โพสต์ล่าสุด
-
-
โพสต์ใหม่ สอบถามการใช้ FormData() ใน Javascript ใช้งานยังไง
โดย chakrit » 27/09/2022 11:02 am » ใน Programming - PHP - 1 ตอบกลับ
- 434 แสดง
-
โพสต์ล่าสุด โดย flook
27/09/2022 11:10 am
-
-
-
โพสต์ใหม่ การแปลงไฟล์เป็น base64 ด้วย JavaScript
โดย fonfonn » 25/08/2022 6:09 pm » ใน jQuery & Ajax Knowledge - 0 ตอบกลับ
- 906 แสดง
-
โพสต์ล่าสุด โดย fonfonn
25/08/2022 6:09 pm
-
-
-
โพสต์ใหม่ การสร้างปุ่มดาวน์โหลดไฟล์ ที่มีการแปลงจาก base64 ในหน้า Javascript
โดย fonfonn » 05/09/2022 4:01 pm » ใน jQuery & Ajax Knowledge - 0 ตอบกลับ
- 703 แสดง
-
โพสต์ล่าสุด โดย fonfonn
05/09/2022 4:01 pm
-
-
-
โพสต์ใหม่ สอบถามการใช้ mysqli_real_escape_string
โดย Thanapoom1514 » 07/03/2023 2:21 pm » ใน Programming - PHP - 3 ตอบกลับ
- 994 แสดง
-
โพสต์ล่าสุด โดย mindphp
07/03/2023 6:54 pm
-
-
- 3 ตอบกลับ
- 743 แสดง
-
โพสต์ล่าสุด โดย chakrit
18/08/2022 10:44 am
-
-
โพสต์ใหม่ สอบถามการใช้ AI generate รูปภาพ
โดย Narisara » 27/11/2023 11:30 am » ใน พูดคุยเรื่องทั่วไป จับฉ่าย - 1 ตอบกลับ
- 873 แสดง
-
โพสต์ล่าสุด โดย Thanavat_n
27/11/2023 12:02 pm
-
-
-
โพสต์ใหม่ สอบถามการใช้ api python มาใช้ใน php
โดย Thanapoom1514 » 13/09/2022 4:43 pm » ใน Programming - PHP - 2 ตอบกลับ
- 972 แสดง
-
โพสต์ล่าสุด โดย mindphp
14/09/2022 9:41 pm
-
ผู้ใช้งานขณะนี้
สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 89