PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum


ช่วยแนะนำวิธี ให้ 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 IP: 171.96.244.xxx วันที่: 13-09-2014 เวลา: 10:51:11

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

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


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


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

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


โดย:  Ninenik IP: 1.46.17.xxx วันที่: 13-09-2014
 ความคิดเห็นที่ 2
ขอถามเพิ่มครับ จากตัวอย่างที่ให้เป็นแนวทางนะครับ
ถ้า กรณีที่ เลือกรูป แล้ว 1 รูป แล้ว อยาก กดเพิ่ม รูป อีก  กดเลือก รูป ใหม่ เลย ต้องทำยังไงครับ 
ตัวอย่างเหมือนต้องเลือกในครั้งเดียวให้ครบเลย นะครับ



โดย:  Wowowow IP: 171.96.244.xxx วันที่: 14-09-2014 เวลา: 22:39:17
 ความคิดเห็นที่ 3
ให้เข้าใจแบบนี้ว่า การเลือกแบบ input file เราไม่สามารถเลือกไฟล์เพิ่มเข้าไปได้ ต้องเลือกครั้งเดียว
แต่ถ้าใช้ html5 จะใช้วิธีการ drop ไฟล์ โดยจะมีการสร้าง Filelist object แล้วสามารถอัพโหลดแบบ ajax ได้

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


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

Name :
Picture :
Upload 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 IP: 1.47.209.xxx วันที่: 14-09-2014
 ความคิดเห็นที่ 4
สอบถามนิดนึงครับ ถ้าผมอยากได้ คำอธิบาย ใต้ภาพ ผมควรจะเพิ่ม text box ในส่วนไหนหรอครับ


โดย:  KiMZuhuM IP: 223.206.109.xxx วันที่: 08-12-2016 เวลา: 17:17:53