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

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

ถาม-ตอบ แนะนำไอเดีย โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา ช่วยแนะนำวิธี ให้ uploadify แสดงรูป ตัวอย่างเมื่อกดเลือกรูป ด้วยครับ

ปัจจุบัน นักพัฒนาสามารถ ใช้ ChatGPT | Gemini | Claude | Perplexity | Deepseek ช่วยในการแก้ไขปัญหาต่างๆ ในการเขียนโปรแกรม หรือหาข้อมูลเพิ่มเติมได้ง่ายและสะดวก แนะนำให้ทุกคนใช้งานเพื่อพัฒนาศักยภาพของตัวเอง

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

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

ผมเอาอ่าน doc แล้ว ไม่เข้าใจครับ
โค้ดผม เอามาจากที่โหลดโค้ด

<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>UploadiFive Test</title>
	<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
	<script src="jquery.uploadify.min.js" type="text/javascript"></script>
	<link rel="stylesheet" type="text/css" href="uploadify.css">
	<style type="text/css">
	.form-create {
		width: 400px;
		border: 1px solid #000000;
		padding: 15px;
	}
	.group {
		margin: 5px 0;
		
	}
	.group label {
		display: inline-block;
		width: 100px;
	}

	</style>
</head>

<body>
	
	<div class="form-create">
		<form action="" method="post" enctype="multipart/form-data">
			<div class="group">
				<label for="name">ตั้งชื่อสินค้า:</label>
				<input type="text" value="" maxlength="50" name="name" id="name">
			</div>
			<div class="group">
				<label for="region">รายละเอียดสินค้า:</label>
				<textarea name="detail"></textarea>
			</div>
			<div class="group">
				<label >รูปภาพสินค้า:</label>
				<input id="file_upload" name="file_upload" type="file" multiple="true">
			</div>
                        <div class="group">                     
                         
                             <input type="submit" value="ตกลง" name="create">
                         </div>
                    

		</form>
	</div>

	<script type="text/javascript">
	<?php $timestamp = time();?>
	$(function() {
		$('#file_upload').uploadify({
			'formData'     : {
				'timestamp' : '<?php echo $timestamp;?>',
				'token'     : '<?php echo md5('unique_salt' . $timestamp);?>'
			},
			'swf'      : 'uploadify.swf',
			'uploader' : 'uploadify.php',
			'cancelImg': 'cancel.png',
			'fileTypeExts' : '*.gif; *.jpg; *.png',
			'multi'      : true,

		});		

	});
	</script>

</body>
</html>

ต้องเพิ่มในส่วนให้ครับ
แล้ว ผมอยากให้ กดปุ่ม submit - ของ form แล้ว ค่อย อัพภาพ พร้อมข้อมูลที่กรอกนะครับ ช่วยแนะนำด้วยครับ
ขอบคุณครับ

Wowowow 13-09-2014 10:51:11

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

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

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

Pass

Code

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

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

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

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

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

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

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

ลองตัวนี้เป็นแนวทาง

แสดงตัวอย่าง รูปภาพ ก่อนอัพโหลด ด้วย html5 อย่างง่าย

https://www.ninenik.com/content.php?arti_id=551 via @ninenik

ninenik 13-09-2014

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

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

ตัวอย่างเหมือนต้องเลือกในครั้งเดียวให้ครบเลย นะครับ

wowowow 14-09-2014 22:39

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

ให้เข้าใจแบบนี้ว่า การเลือกแบบ input file เราไม่สามารถเลือกไฟล์เพิ่มเข้าไปได้ ต้องเลือกครั้งเดียว
แต่ถ้าใช้ html5 จะใช้วิธีการ drop ไฟล์ โดยจะมีการสร้าง Filelist object แล้วสามารถอัพโหลดแบบ ajax ได้

แต่ก็สามารถประยุกต์ เอาได้ โดยใช้วิธีเพิ่ม input file เข้าไปแทน

ดูตัวอย่าง

บันทึกข้อมูล

โค้ดตัวอย่างการประยุกต์

<!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>

ninenik 14-09-2014

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

สอบถามนิดนึงครับ ถ้าผมอยากได้ คำอธิบาย ใต้ภาพ ผมควรจะเพิ่ม text box ในส่วนไหนหรอครับ

KiMZuhuM 08-12-2016 17:17

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

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

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