alert bootstrap รบกวนหน่อยค่ะ

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา alert bootstrap รบกวนหน่อยค่ะ

alert bootstrap รบกวนหน่อยค่ะ

คืออยากทราบค่ะ ว่าถ้าเราจะดักไฟล์รูปได้แค่ png,gif,jpg ค่ะ แล้วถ้าผู้ใช้ upload ผิด อยากให้ขึ้นเจ้งเตือนเป็นกรอบนี้ค่ะ ถ้าถูกจะเป็นสีเขียว ถ้าไม่ถูกไฟล์จะเป็นสีแดงค่ะ รบกวนหน่อยนะค่ะ ไม่ทราบวิธีเขียนเลยค่ะ T^T

Chickenkook 183.88.103.xxx 27-09-2015 15:43:43

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 1

ขึ้นกับว่าใช้ตอนไหน ถ้าใช้ตอน sumit แล้วก็ ใช้ php ตรวจสอบ แล้วกำหนด if else ธรรมดา
ถ้าใช้ javascript ดูตัวอย่างนี้เป็นแนวทาง

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>

<div style="margin:auto;width:600px;">

<p id="alert_p" class="bg-success hidden">Ok</p>
<p id="alert_p2" class="bg-danger hidden">No</p>
<input type="file" name="fileupload" id="fileupload">  

</div>

<script type="text/javascript">
$(function(){

    $("#fileupload").on("change",function(e){
        var files = this.files;  
        var checkFile=1;
         for(var i=0;i<files.length;i  ){  
                    var file = files[i]  
                    var imageType = /image.*/  
                    if(!file.type.match(imageType)){  
                        checkFile=0;
                        //     console.log("Not an Image");  
                        continue;  
                    }  
         }
        if(checkFile==0){
            $(this).val("");
            $("#alert_p").removeClass("show").addClass("hidden");
            $("#alert_p2").removeClass("hidden").addClass("show");
        }else{
            $("#alert_p").removeClass("hidden").addClass("show");
            $("#alert_p2").removeClass("show").addClass("hidden");            
        }
    });
    
});
    </script>        
</body>
</html>

ninenik 1.46.65.xxx 27-09-2015

ความคิดเห็นที่ 2

ขอบคุณค่ะ แล้วถ้าจะตรวจเช็คแบบ input ละค่ะ ทำยังไงค่ะ

chickenkook 183.88.103.xxx 28-09-2015 19:25

ความคิดเห็นที่ 3

ถ้าใช้งานโดยรวมแนะนำให้ใช้พวก plugin แทน จะง่ายกว่า
เพราะถ้าประยุกต์แต่ละตัวเราต้องมีพื้นฐาน

ลองใช้รูปแบบนี้ดู

http://formvalidator.net/#reg-form

ninenik 1.47.9.xxx 29-09-2015

ความคิดเห็นที่ 4

http://formvalidator.net/#reg-form
มันใช้ ภาษา ไทย พิมพ์ไม่ได้อ่ะครับ
แก้ไขยัง ครับ

twenty1 182.255.10.xxx 30-06-2017 15:29

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน