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

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







<!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 f('ip_que'))?> 31-10-2016 19:52:43

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

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

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

Pass

Code

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

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

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

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

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

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

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

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

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

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

การเลือกไฟล์แบบหลายครั้ง เช่นการเลือกไฟล์ที่อยู่คนละโฟลเดอร์ เพื่ออัพโหลด ดูที่กระทู้นี้

https://www.ninenik.com/forum_view_1171_1.html

ninenik f('ip_ans'))?> 31-10-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 f('ip_ans'))?> 03-11-2016 20:38

ความคิดเห็นที่ 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';
		console.log('test');
        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>

ตัวอย่าง DEMO

ninenik f('ip_ans'))?> 03-11-2016

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

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

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