สอบถามเกี่ยวกับ การแก้ไข input file อัพโหลดรูปภาพ ครับ

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา สอบถามเกี่ยวกับ การแก้ไข input file อัพโหลดรูปภาพ ครับ

สอบถามเกี่ยวกับ การแก้ไข input file อัพโหลดรูปภาพ ครับ

จากโค้ดที่พี่เคยแนะนำไว้นะครับ
ผมจะทำหน้า ตอนแก้ไข ข้อมูล จะต้องทำยังไงครับ
ถ้า ผมมีรูป ที่เก็บ ในดาต้าเบส 1 รูป แล้ว จะเพิ่ม รูปอีก หรือ เพิ่มรูปไปใหม่หมด แล้วลบรูปเก่าทิ้ง นะครับ
จะดึงค่าเก่ามาใส่ ยังไงครับ ผมลอง ใส่ค่า ใน value แล้วไม่ได้นะครับ

<input class="file_upload" value="<?php echo $img ?>" type="file" name="file_upload[]" style="display: none;">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <style type="text/css">
        .drop-area{
          width:100px; height:25px;
          border: 1px solid #999; text-align: center;
          padding:10px; cursor:pointer;
        }
        #thumbnail img{width:100px;height:100px;margin:5px;}
        canvas{border:1px solid red;}    
    </style>
</head>
<body>

    <br>  
    <div style="margin:auto;width:80%;">  
        <h3> บันทึกข้อมูล</h3>   
        <form class="form" id="myFrom" method="post" action="show_data.php"  role="form" enctype="multipart/form-data">    
            <div class="form-group">  
               <lable class="control-label">Name : </lable>  
                <input type="text" autocomplete="off" class="form-control" name="name">  
            </div>  
            <div class="form-group">  
               <lable class="control-label">Picture : </lable>  
            <div id="upload" class="btn btn-info">
               Upload File
            </div>
            <div id="thumbnail"></div>               
            </div>  
            <button type="submit"  class="btn btn-primary">เพิ่มข้อมูล</button>             
        </form>  
        <br>  
        
    </div>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  
<script type="text/javascript" >
$(function () {


    $("#upload").on("click",function(e){
        var objFile= $("<input>",{
           "class":"file_upload",
            "type":"file",
            "multiple":"true",
            "name":"file_upload[]",
            "style":"display:none",
                change: function(e){
                    var files = this.files
                    showThumbnail(files)    
                }
        });
        $(this).before(objFile);
        $(".file_upload:last").show().click().hide();
        e.preventDefault();
    });

    function showThumbnail(files){

    //    $("#thumbnail").html("");
        for(var i=0;i<files.length;i  ){
            var file = files[i]
            var imageType = /image.*/
            if(!file.type.match(imageType)){
                //     console.log("Not an Image");
                continue;
            }

            var image = document.createElement("img");
            var thumbnail = document.getElementById("thumbnail");
            image.file = file;
            thumbnail.appendChild(image)

            var reader = new FileReader()
            reader.onload = (function(aImg){
                return function(e){
                    aImg.src = e.target.result;
                };
            }(image))

            var ret = reader.readAsDataURL(file);
            var canvas = document.createElement("canvas");
            ctx = canvas.getContext("2d");
            image.onload= function(){
                ctx.drawImage(image,100,100)
            }
        } // end for loop

    } // end showThumbnail


    
    
});
 </script>    
</body>
</html>

Wowowow 11-11-2014 10:49:37

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

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

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

Pass

Code
เปลี่ยน

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

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

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

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

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

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

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

ถ้าเป็นรูปภาพ ก็ไม่ต้องแก้ไข แบบอัพทำอะไร ให้ทำเป็แนบบ
อัพโหลดใหม่เลย คือใช้โค้ดการอัพโหลดแบบปกติ อัพเพิ่มเข้าไปเรื่อยๆ

ส่วนรูปที่มีแล้ว ก็ใช้แค่ให้ลบอย่างเดียว เพราะมีค่าไม่ต่างกับการอัพรูปใหม่ไปแทนรูปเก่า
ดังนั้นก็ใช้วิธี ลบรูป กับเพิ่มรูปธรรมดาแทน

ninenik 11-11-2014

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

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

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