ThaiSEOBoard.com

พัฒนาเว็บไซต์ => Programming => ข้อความที่เริ่มโดย: fogza ที่ 14 มกราคม 2012, 19:46:45


หัวข้อ: jquery upload ที่แสดงสถานะการอัพโหลดรูป เค้าทำกันยังไงหรอครับ?
เริ่มหัวข้อโดย: fogza ที่ 14 มกราคม 2012, 19:46:45
ที่ผมทำอยู่ มีปุ่ม เพิ่ม, ลบ element อยู่ แต่อยากให้มีแสดงสถานะการอัพโหลดเป็น % ด้วยนะครับ การทำงานประมาณนี้ครับ
(http://www.thaicreate.com/upload/stock/20120114155925.gif)

1. เวลามีการเลือกรูปเข้ามา จะทำการอัพโหลดรูปอัตโนมัติ และมีการแสดงสถานะของแต่ละ element นะครับ
2. มีปุ่มกดยกเลิกการอัพโหลดแต่ละ element
3. เวลาอัพโหลดเสร็จก็แสดงข้อความว่า "เสร็จสิ้น" แล้วการทำงานข้อ(2) ก็หายไปครับ

ประมาณนี้นะครับ รบกวนขอแนวทาง หรือคำแนะนำด้วยครับ ว่าต้องไปศึกษาอะไรยังไงบ้างครับ

ด้านล่างนี้เป็นโค้ดที่เห็นตามรูปด้านบนนะครับ
โค๊ด:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Add Del Element</title>
 
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
	$('#add_more').click(function(){	
		//var current_count = $('input[type="text"]').length;
		//var next_count = current_count   1;
		$('#new_text').append('<p>'
							     '<input name="problem[]" type="file" class="new_project_text" />'
							     '<input type="button" id="remove_text" value="-" />'
							     '</p>');				
	});

	$('#remove_text').live('click', function(){
			$(this).parent().remove();
		
		return false;
	});


	$('#ok').click(function(){
        $.get(
              'subElement.php',
              $('#form1').serialize(),
              function(data){
                $('.viewData').html(data);		
              },
              'html'
              );
        return false;
    });
	

});
	
</script>
</head>
 
<body>
	<div class="test"></div>
	<form id="form1" enctype="multipart/form-data" action="" method="GET">
		
		<p id="new_text">
			id บริเวณ:<br /> 
			<input name="idProblem" type="text" sieze="20" /><br /><br />
			บริเวณปัญหา:<br />
			<input name="problem[]" type="file" sieze="20" /><a href="#" id="add_more">เพิ่ม</a>
		</p>
		<p>
			<input id="ok" type="submit" value="Upload" />			
		</p>
	</form>

	ข้อมูลที่ถูกส่งมาจาก Sever:<div class="viewData"></div>

</body>
</html>
รบกวนด้วยนะครับ ขอบคุณครับ  :wanwan017:

หัวข้อ: Re: jquery upload ที่แสดงสถานะการอัพโหลดรูป เค้าทำกันยังไงหรอครับ?
เริ่มหัวข้อโดย: marus ที่ 14 มกราคม 2012, 22:32:09
เคยใช้ SWF upload ทำได้ทุกอย่างตามที่บอก

หัวข้อ: Re: jquery upload ที่แสดงสถานะการอัพโหลดรูป เค้าทำกันยังไงหรอครับ?
เริ่มหัวข้อโดย: rokaisakkon ที่ 14 มกราคม 2012, 23:17:24
เปอเซนต์ นี่ ผมว่าต้องเทพมากเลย หรืออาจทำไม่ได้  เดาเอานะครับ

แต่ที่ผมทำได้ ก็  submit form แบบไม่เปลี่ยน หน้า มันจะได้ผลลัพ คล้าย ๆ ที่คุณต้องการ

หัวข้อ: Re: jquery upload ที่แสดงสถานะการอัพโหลดรูป เค้าทำกันยังไงหรอครับ?
เริ่มหัวข้อโดย: mean ที่ 15 มกราคม 2012, 00:12:51
ค้นหา jquery progress bar ครับ
หรือจริงๆ เค๊าเรียก upload with progress bar
สมัยก่อนผมก็หาแท๊ปตายเหมือนกัน ^^ ไม่รู้เค๊าเรียกอะไร

หัวข้อ: _
เริ่มหัวข้อโดย: New2th ที่ 15 มกราคม 2012, 00:18:48
 :wanwan008:

หัวข้อ: Re: jquery upload ที่แสดงสถานะการอัพโหลดรูป เค้าทำกันยังไงหรอครับ?
เริ่มหัวข้อโดย: fogza ที่ 15 มกราคม 2012, 02:32:58
อ้างจาก: marus ที่ 14 มกราคม 2012, 22:32:09
เคยใช้ SWF upload ทำได้ทุกอย่างตามที่บอก
ผมไล่ๆ หาดู ก็เห็นคล้ายๆ แบบนี้ครับ แต่ยังงง ๆ กับโค้ดอยู่
ตอนได้ก็ได้แต่้ เพิ่ม ลบ element ต่างๆ อย่างเดียว ท่านใดพอได้บ้าง ก็ช่วยสงเคราะห์กันหน่อยนะครับ  :P
* element ที่เป็นแบบอาเรย์ใน php อย่างเช่นผมประกาศ
<input name="problem[]" type="file" sieze="20" />
หลังจากกด submit มีการ return value มาเรียบร้อย จะให้มันลบอาเรย์ตำแหน่งอื่นๆ ที่กดเพิ่มขึ้นมายังไงครับ ให้เหลือแค่ problem[] อันเดียวในรูปด้านบนนะครับ

หัวข้อ: Re: jquery upload ที่แสดงสถานะการอัพโหลดรูป เค้าทำกันยังไงหรอครับ?
เริ่มหัวข้อโดย: EntServ ที่ 16 มกราคม 2012, 17:24:39
รู้สึกจะมีplugins สำหรับการอัพโหลดโดยเฉพาะอยู่

Uploadfy มั้ง จำชื่อไม่ค่อยได้


SMF 1.1.21 | Simple Machines | ThaiSEOBoard.com