สอบถามเกี่ยวกับ การแก้ไข input file อัพโหลดรูปภาพ ครับ
ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา สอบถามเกี่ยวกับ การแก้ไข input file อัพโหลดรูปภาพ ครับ
สอบถามเกี่ยวกับ การแก้ไข input file อัพโหลดรูปภาพ ครับ
Copy
จากโค้ดที่พี่เคยแนะนำไว้นะครับ
ผมจะทำหน้า ตอนแก้ไข ข้อมูล จะต้องทำยังไงครับ
ถ้า ผมมีรูป ที่เก็บ ในดาต้าเบส 1 รูป แล้ว จะเพิ่ม รูปอีก หรือ เพิ่มรูปไปใหม่หมด แล้วลบรูปเก่าทิ้ง นะครับ
จะดึงค่าเก่ามาใส่ ยังไงครับ ผมลอง ใส่ค่า ใน value แล้วไม่ได้นะครับ
ผมจะทำหน้า ตอนแก้ไข ข้อมูล จะต้องทำยังไงครับ
ถ้า ผมมีรูป ที่เก็บ ในดาต้าเบส 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>
คำแนะนำ และการใช้งาน
สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก
- ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา
โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ