PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

สอบถามเกี่ยวกับ การแก้ไข 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 IP: 58.11.73.xxx วันที่: 11-11-2014 เวลา: 10:49:37

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

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


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


  • ( หรือ สามารถทำการ สมัครสมาชิก และล็อกอิน ด้วย ปุ่ม Log in with Facebook ด้านล่าง )
 ความคิดเห็นที่ 1
ถ้าเป็นรูปภาพ ก็ไม่ต้องแก้ไข แบบอัพทำอะไร ให้ทำเป็แนบบ
อัพโหลดใหม่เลย คือใช้โค้ดการอัพโหลดแบบปกติ อัพเพิ่มเข้าไปเรื่อยๆ

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

โดย:  Ninenik IP: 115.87.101.xxx วันที่: 11-11-2014