PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

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

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






<!DOCTYPE HTML>
<html>
<head>
<title>ThaiCreate.Com</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">



  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

</head>
<body>
<? $GalleryID = $_GET["GalleryID"];
$objConnect = mysql_connect("localhost","root","12345678") or die(mysql_error());
	$objDB = mysql_select_db("gallery") or die(mysql_error());
	mysql_query("SET NAMES UTF8");


		
			$strSQL = "SELECT * FROM tb_gallery where GalleryID = '$GalleryID' ";
			
			//echo $strSQL;
			$objQuery = mysql_query($strSQL) or die(mysql_error());
			$objResult = mysql_fetch_array($objQuery)
			
		?>
        <div align="center">
			    <img src="resource/slider/<?=$objResult["Slider"];?>" alt="<?=$objResult["Name"];?>  width="135" height="110" border="0"  "/>
               
				    <br>  
				  ชื่อปกอัลบั้ม  <?=$objResult["Name"];?>  &nbsp;
				    
				   จำนวน <?=$objResult["Picture"];?>  ภาพ
				    <br /><br />
				   
				   หัวเรื่อง  <?=$objResult["Topic"];?>
			 
			  
</div>
			    




 
   <? #  jqury รูปภาพของนิสิต?>
	        <script type="text/javascript">
 $(function(){
    Test = {
        UpdatePreview: function(obj){
          // if IE < 10 doesn't support FileReader
          if(!window.FileReader){
             // don't know how to proceed to assign src to image tag
          } else {
             var reader = new FileReader();
             var target = null;
             
             reader.onload = function(e) {
              target =  e.target || e.srcElement;
               $("#pic1").prop("src", target.result);
             };
              reader.readAsDataURL(obj.files[0]);
          }
        }
    };
});
    </script>







            <script type="text/javascript">
            $(function(){	 var chk=0;
	$("#addRow").click(function(){
		if(chk>6){
                    alert("ข้อมูลเกินที่กำหนด");
                    return false;
                    }   
		var NR ="";   NR="<tr>";  
		
		
		// <img  id="pic1"src="#" alt="รูปภาพ" width="128" height="128" />
   // <br>
   // เลือกไฟล์ที่ต้องการ : <input type='file' name='browse' onchange='Test.UpdatePreview(this)'  />
   
  
   
   NR+="<td width="60">";NR+="<img   name="pic[]" id="pic1" src="#" alt="รูปภาพ"  width="128" height="128" />";NR+="</td>";
	NR+="<td width="60">";NR+="<input type="file" name="browse[]" id="browse" onchange="Test.UpdatePreview(this)"  />";NR+="</td>";
		NR+="<td width="60">"; NR+="<input type="text" name="Scholarships_year[]" id="Scholarships_year" size="10" />"; NR+="</td>";
		NR+="<td width="120">"; NR+="<input type="text" name="Scholarships_name[]" id="Scholarships_name" size="20" />"; NR+="</td>";
		//NR+="<td width="120">"; NR+="<input type="text" name="Scholarships_kind[]" id="Scholarships_kind" size="20" />"; NR+="</td>";
		//NR+="<td width="120">"; NR+="<input type="text" name="Scholarships_money[]" id="Scholarships_money" size="20" />"; NR+="</td>" ;
	




		NR+="</tr>";chk++;
		//$("#myTbl").append($("#firstTr").clone());
		$("#myTbl").append($(NR));     });
	    
	$("#removeRow").click(function(){
		if($("#myTbl tr").size()>1){
			$("#myTbl tr:last").remove() ;chk--;
		
		}else{
			alert("ไม่มีตารางให้ท่านลบแล้ว");
		}
	});
    $('input[name="toon"]').click(function(){
        var Ck = $(this).val();
        if(Ck=="no"){
          $('#DivTable').hide();
        }else{
          $('#DivTable').show();
        }
    });
});
 </script><br />


<div id="DivTable">
<table id="myTbl" width="600" border="1"  align="center">
  <tr>
    <td align="center">ภาพ</td>
      <td align="center">เลือกไฟล์</td>
        <td align="center">ชื่อภาพ</td>
        <td align="center">คำบรรยาย</td>
        
  </tr>
 
 
</table>
<p align="center">
<button id="prev" type="prev">กลับหน้าหลัก</button>
<button id="addRow" type="button">+</button>
<button id="removeRow" type="button">-</button>
<button id="submit" type="submit">บันทึก</button>

</p>
</div>
 
</body>
</html>


โดย:  Komza IP: 110.78.143.xxx วันที่: 31-10-2016 เวลา: 19:52:43

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

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


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


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

ตัวอย่างโค้ด

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>

<style type="text/css">  
.thumbnail_div img{width:100px;height:100px;margin:5px;}  
canvas{border:1px solid red;}      
</style>  


<div style="margin:auto;width:700px;">
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
<table id="myTbl" width="650" border="1" cellspacing="2" cellpadding="0">
  <tr class="firstTr">
    <td width="119">
    <select name="data1[]" id="data1[]">
    <option value="">Please select</option>
    <option value="1">data1</option>
    <option value="2">data2</option>
    </select></td>
    <td width="100">
    <div class="thumbnail_div"></div>  
    </td>
    <td width="100">
    <input type="file" name="browse[]" class="browse_file" />
    </td>
    <td width="519">
    <input name="h_item_id[]" type="hidden" id="h_item_id[]" value="" />
    <input type="text" class="text_data" name="data2[]" id="data2[]" />
    </td>
    </tr>
</table>
<br />
<table width="500" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
    <button id="addRow" type="button">+</button>  
    &nbsp;
    <button id="removeRow" type="button">-</button>
	&nbsp;
    &nbsp;
    &nbsp;
    <input name="h_all_id_data" type="hidden" id="h_all_id_data" value="<?=$all_id_data?>" />    
    <input type="submit" name="Submit" id="Submit" value="Submit" /></td>
  </tr>
</table>
</form>



<br />
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>      
<script type="text/javascript">
$(function(){
	
	$("#addRow").click(function(){
		// ส่วนของการ clone ข้อมูลด้วย jquery clone() ค่า true คือ
		// การกำหนดให้ ไม่ต้องมีการ ดึงข้อมูลจากค่าเดิมมาใช้งาน
		// รีเซ้ตเป็นค่าว่าง ถ้ามีข้อมูลอยู่แล้ว ทั้ง select หรือ input
		$(".firstTr:eq(0)").clone(true) 
		.find(".thumbnail_div").html("").end()
		.find("input:text").attr("value","").end()
		.find("select").attr("value","").end()
		.appendTo($("#myTbl"));
	});
	$("#removeRow").click(function(){
		// // ส่วนสำหรับการลบ
		if($("#myTbl tr").size()>1){ // จะลบรายการได้ อย่างน้อย ต้องมี 1 รายการ
			$("#myTbl tr:last").remove(); // ลบรายการสุดท้าย
		}else{
			// เหลือ 1 รายการลบไม่ได้
			alert("ต้องมีรายการข้อมูลอย่างน้อย 1 รายการ");
		}
	});	

    $(".browse_file").on("change",function(e){  
        var files = this.files  
		var indexObj = $(".browse_file").index(this);
		var obj = 'thumbnail_div'
        showThumbnail(files,obj,indexObj);         
    });  
	
    function showThumbnail(files,obj,indexObj){  
  
		$("."+obj).eq(indexObj).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.getElementsByClassName(obj)[indexObj];
            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.200.xxx วันที่: 03-11-2016
 ความคิดเห็นที่ 2


มันแสดงภาพ ที่อันบนอันเดียวเองอะพี่  ตัวอย่างที่พี่ให้ไป มันประยุกแบบนี้ไม่ได้อะคับ ผมทำไม่เป็น
 NR+="<td width="60">";NR+="<img   name="pic[]" id="pic1" src="#" alt="รูปภาพ"  width="128" height="128" />";NR+="</td>";  
    NR+="<td width="60">";NR+="<input type="file" name="browse[]" id="browse" onchange="Test.UpdatePreview(this)"  />";NR+="</td>";  
โชว์รูป  แต่ id="pic1" จะส่งค่าให้วนลูปยังไง ส่งไปที่   $("#pic1").prop("src", target.result);   ได้ยังไงคับ  ให้เป็นตัวแปรแล้ววนลูป   ยังไง ผมงงอะคับ


โดย:  Komza IP: 110.77.170.xxx วันที่: 03-11-2016 เวลา: 20:38:32
 ความคิดเห็นที่ 1
ไม่รู้ว่าทำอะไรน่ะ มองภาพไม่ออก บางทีบางอย่างก็อาจจะทำไม่ได้ ตามข้อจำกัด
ลองดูเนื้อหานี้เป็นแนวทาง

แสดงตัวอย่าง รูปภาพ ก่อนอัพโหลด ด้วย html5 อย่างง่าย 
http://www.ninenik.com/content.php?arti_id=551 via @ninenik

การเลือกไฟล์แบบหลายครั้ง เช่นการเลือกไฟล์ที่อยู่คนละโฟลเดอร์ เพื่ออัพโหลด ดูที่กระทู้นี้ 
http://www.ninenik.com/forum_view_1171_1.html


โดย:  Ninenik IP: 1.47.139.xxx วันที่: 31-10-2016