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

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

ช่วยแนะนำวิธี ให้ 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 บาท หรือ ระบุจำนวน