ด้วยสํานึกในพระมหากรุณาธิคุณสมเด็จพระนางเจ้าสิริกิติ์เป็นล้นพ้นอันหาที่สุดมิได้


การใช้งาน FormData() ใน HTML5 อัพโหลดไฟล์ผ่าน ajax ด้วย jquery

เขียนเมื่อ 9 ปีก่อน โดย Ninenik Narkdee
jquery html5 formdata ajax อัพโหลด

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ jquery html5 formdata ajax อัพโหลด

ดูแล้ว 34,707 ครั้ง


เนื้อหาต่อไปนี้ เป็นบันทึกช่วยจำ เกี่ยวกับการประยุกต์ใช้งาน FormData Object จะสามารถใช้งาน
ได้เฉพาะในบราวเซอร์รุ่นใหม่ๆ เท่านั้น ดูบราวเซอร์ที่สนับสนุนการใช้งาน MLHttpRequest Level 2
รองรับ FormData Object ได้ที่
 
 
โดยส่วนใหญ่รองรับการใช้งานแล้ว
 
ก่อนอื่นมาทบทวนรูปแบบการส่งข้อมูลด้วย ajax แบบเดิม ที่ไม่รองรับ การส่ง input file 
 

การส่งข้อมูลด้วย ajax ที่ไม่รองรับ การส่งค่า input file 

 
ไฟล์ show_data.php สำหรับรับค่าข้อมูลที่ส่งผ่าน ajax (ในที่นี้จะแสดงข้อมูลที่ส่งมาเป็นตัวอย่างเท่านั้น)
 
1
2
3
4
5
6
7
8
9
<?php
if(isset($_POST["mytext1"])){
    echo "<pre>";
    print_r($_POST);
    print_r($_FILES);  
    echo "</pre>";   
exit;
}
?>
 
ไฟล์ form_ajax1.php การส่งข้อมูลด้วย ajax
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title>
</head>
 
<body>
 
 
<br />
<form action="" method="post" enctype="multipart/form-data" name="myform1" id="myform1">
<input type="text" name="mytext1" id="mytext1"><br>
<input type="file" name="pic_upload" id="pic_upload" />
<input type="submit" name="bt_upload" id="bt_upload" value="Submit" />
</form>
 
 
<br>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>    
<script type="text/javascript">
 
$(function(){
     
    // เมื่อฟอร์มการเรียกใช้ evnet submit ข้อมูล       
    $("#myform1").on("submit",function(e){
        e.preventDefault(); // ปิดการใช้งาน submit ปกติ เพื่อใช้งานผ่าน ajax
 
        // เตรียมข้อมูล form สำหรับส่ง
       var formData = $(this).serialize();
 
        // ส่งค่าแบบ POST ไปยังไฟล์ show_data.php
        $.post("show_data.php",formData,function(data){
                console.log(data);  // ทดสอบแสดงค่า  ดูผ่านหน้า console
                /*การใช้งาน console log เพื่อ debug javascript ใน chrome firefox และ ie
                https://www.ninenik.com/content.php?arti_id=692 via @ninenik                   
*/      });
         
    });
     
     
});
</script>
</body>
</html>
 
เมื่อเราทดสอบรันโค้ดข้างด้ร โดยเลือกไฟล์ และก็พิมพ์ข้อมูลบางค่าลงไปใน input text
แล้วกดปุ่ม submit จะได้ผลลัพธ์ประมาณนี้
 
1
2
3
4
5
6
7
8
<pre>Array
(
    [mytext1] => ทดสอบ
)
Array
(
)
</pre>
 
สังเกตว่าในส่วนของตัวแปร $_FILES จะไม่มีการส่งค่าเข้ามาด้วย จะส่งข้อมูลมาเฉพาะ
ส่วนของตัวแปร $_POST เพราะการใช้งาน method serialize() จะไม่สามารถส่งข้อมูลจาก input file ได้
 
 

การส่งข้อมูลด้วย ajax รองรับ การส่งค่า input file 

 
ต่อไปเรามาดูโค้ดตัวอย่างการส่งค่าด้วย ajax โดยใช้งาน FormData Object รองรับการส่งค่า input file
เราจะใช้ไฟล์ show_data.php ทดสอบตัวเดิม
 
1
2
3
4
5
6
7
8
9
<?php
if(isset($_POST["mytext1"])){
    echo "<pre>";
    print_r($_POST);
    print_r($_FILES);  
    echo "</pre>";   
exit;
}
?>
 
ไฟล์ form_ajax2.php
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title>
</head>
 
<body>
 
 
<br />
<form action="" method="post" enctype="multipart/form-data" name="myform1" id="myform1">
<input type="text" name="mytext1" id="mytext1"><br>
<input type="file" name="pic_upload" id="pic_upload" />
  <input type="submit" name="bt_upload" id="bt_upload" value="Submit" />
</form>
 
 
<br>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>    
<script type="text/javascript">
$(function(){
     
    // ส่วนของการกำหนดการตั้งค่าการใช้งาน ajax ของ jquery
    // เพิ่มเติม https://api.jquery.com/jQuery.ajax/
    // กรณีใช้งานอัพโหลดไฟล์ด้วย ajax ต้องกำหนด  contentType: false, และ processData: false
    $.ajaxSetup({
        cache: false,
        contentType: false,
        processData: false
    });        
         
    // เมื่อฟอร์มการเรียกใช้ evnet submit ข้อมูล       
    $("#myform1").on("submit",function(e){
        e.preventDefault(); // ปิดการใช้งาน submit ปกติ เพื่อใช้งานผ่าน ajax
         
        // เตรียมข้อมูล form สำหรับส่งด้วย  FormData Object
       var formData = new FormData($(this)[0]);
 
        // ส่งค่าแบบ POST ไปยังไฟล์ show_data.php
        $.post("show_data.php",formData,function(data){
                console.log(data);  // ทดสอบแสดงค่า  ดูผ่านหน้า console
/*              การใช้งาน console log เพื่อ debug javascript ใน chrome firefox และ ie
                https://www.ninenik.com/content.php?arti_id=692 via @ninenik            */
        });
         
    });
     
     
});
</script>
</body>
</html>
 
เมื่อเราทดสอบรันโค้ดข้างด้ร โดยเลือกไฟล์ และก็พิมพ์ข้อมูลบางค่าลงไปใน input text
แล้วกดปุ่ม submit จะได้ผลลัพธ์ประมาณนี้
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<pre>Array
(
    [mytext1] => ทดสอบ form object
    [bt_upload] => Submit
)
Array
(
    [pic_upload] => Array
        (
            [name] => fullcalendar1.png
            [type] => image/png
            [tmp_name] => C:xampptmpphpB569.tmp
            [error] => 0
            [size] => 36874
        )
 
)
</pre>
 
จะเห็นว่าในส่วนนี้ เราสามารถส่งค่า input file ผ่าน ajax ได้
จะมีค่าตัวแปร $_POST และ $_FILES ถูกส่งมาด้วย
ซึ่งการใช้งาน formData Object ผ่าน ajax ของ jquery จำเป็นต้องกำหนดค่าเหล่านี้ก่อนเสมอ
 
1
2
3
4
5
6
7
8
// ส่วนของการกำหนดการตั้งค่าการใช้งาน ajax ของ jquery
// เพิ่มเติม https://api.jquery.com/jQuery.ajax/
// กรณีใช้งานอัพโหลดไฟล์ด้วย ajax ต้องกำหนด  contentType: false, และ processData: false
$.ajaxSetup({
    cache: false,
    contentType: false,
    processData: false
});
 
 
หรือกรณีเราใช้รูปแบบ ajax แบบเต็ม ก็สามารถกำหนดเป้นดังนี้ แทนได้ โดยไม่ต้องกำหนด $.ajaxSetup
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title>
</head>
 
<body>
 
 
<br />
<form action="" method="post" enctype="multipart/form-data" name="myform1" id="myform1">
<input type="text" name="mytext1" id="mytext1"><br>
<input type="file" name="pic_upload" id="pic_upload" />
  <input type="submit" name="bt_upload" id="bt_upload" value="Submit" />
</form>
 
 
<br>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>    
<script type="text/javascript">
$(function(){
     
     
    // เมื่อฟอร์มการเรียกใช้ evnet submit ข้อมูล       
    $("#myform1").on("submit",function(e){
        e.preventDefault(); // ปิดการใช้งาน submit ปกติ เพื่อใช้งานผ่าน ajax
         
        // เตรียมข้อมูล form สำหรับส่งด้วย  FormData Object
       var formData = new FormData($(this)[0]);
 
        // ส่งค่าแบบ POST ไปยังไฟล์ show_data.php รูปแบบ ajax แบบเต็ม
        $.ajax({
            url: 'show_data.php',
            type: 'POST',
            data: formData,
            /*async: false,*/
            cache: false,
            contentType: false,
            processData: false
        }).done(function(data){
                console.log(data);  // ทดสอบแสดงค่า  ดูผ่านหน้า console
/*              การใช้งาน console log เพื่อ debug javascript ใน chrome firefox และ ie
                https://www.ninenik.com/content.php?arti_id=692 via @ninenik            */
        });    
 
    });
     
     
});
</script>
</body>
</html>
 
กรณีที่สองนี้ ได้ผลลัพธ์เช่นเดียวกันกับ การใช้รูปแบบ $.post ของตัวอย่างก่อนหน้า
 
จากตัวอย่างข้างต้น เราจะเห็นว่า เป็นการใช้งานข้อมูลทั้งหมดที่อยู่ในฟอร์ม เพิ่มสร้าง formData
โดย fomData Object ยังรองรับการเพิ่มค่าข้อมูลจากภายนอกฟอร์มได้ หรือรองรับค่าที่กำหนด
เพิ่มเติมได้ โดยใช้ method ชื่อว่า append()
 
รูปแบบการใช้งาน
 
1
formData.append("ชื่อตัวแปร","ค่าข้อมูล");
 
ตัวอย่าง
 
1
formData.append("mytext2","ทดสอบข้อมูลเพิ่มเติม");
 
ตัวอย่างการใช้งาน append() รับค่าข้อมูลนอกฟอร์ม และส่งไปพร้อม formData Object
ไฟล์ form_ajax3.php
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title>
</head>
 
<body>
 
<input type="text" name="mytext2" id="mytext2"><br>
<br />
<form action="" method="post" enctype="multipart/form-data" name="myform1" id="myform1">
<input type="text" name="mytext1" id="mytext1"><br>
<input type="file" name="pic_upload" id="pic_upload" />
  <input type="submit" name="bt_upload" id="bt_upload" value="Submit" />
</form>
 
 
<br>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>    
<script type="text/javascript">
$(function(){
     
    // ส่วนของการกำหนดการตั้งค่าการใช้งาน ajax ของ jquery
    // เพิ่มเติม https://api.jquery.com/jQuery.ajax/
    // กรณีใช้งานอัพโหลดไฟล์ด้วย ajax ต้องกำหนด  contentType: false, และ processData: false
    $.ajaxSetup({
        cache: false,
        contentType: false,
        processData: false
    });        
         
    // เมื่อฟอร์มการเรียกใช้ evnet submit ข้อมูล       
    $("#myform1").on("submit",function(e){
        e.preventDefault(); // ปิดการใช้งาน submit ปกติ เพื่อใช้งานผ่าน ajax
         
        // เตรียมข้อมูล form สำหรับส่งด้วย  FormData Object
       var formData = new FormData($(this)[0]);
       formData.append("mytext2",$("#mytext2").val()); // เพิ่มค่าจากนอกฟอร์ม
        
        // ส่งค่าแบบ POST ไปยังไฟล์ show_data.php รูปแบบ ajax แบบเต็ม
        $.post("show_data.php",formData,function(data){
                console.log(data);  // ทดสอบแสดงค่า  ดูผ่านหน้า console
/*              การใช้งาน console log เพื่อ debug javascript ใน chrome firefox และ ie
                https://www.ninenik.com/content.php?arti_id=692 via @ninenik            */
        });
         
    });
     
     
});
</script>
</body>
</html>
 
 
ผลล้พธ์
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<pre>Array
(
    [mytext1] => ทดสอบ formData
    [bt_upload] => Submit
    [mytext2] => ข้อมูลนอกฟรอ้ม
)
Array
(
    [pic_upload] => Array
        (
            [name] => fullcalendar1.png
            [type] => image/png
            [tmp_name] => C:xampptmpphpCAE1.tmp
            [error] => 0
            [size] => 36874
        )
 
)
</pre>
 
จะเห็นว่ามีส่วนของข้อมูลจากตัวแปร $_POST['mytext2'] ถูกส่งค่าไปด้วย
 
 
เท่านี้เราก็สามารถนำไปประยุกต์ใช้งานเพิ่มเติมได้


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ







เนื้อหาที่เกี่ยวข้อง



Tags:: html5 อัพโหลด formdata jquery ajax







URL สำหรับอ้างอิง











สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2025 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ