ที่ผมทำอยู่ มีปุ่ม เพิ่ม, ลบ element อยู่ แต่อยากให้มีแสดงสถานะการอัพโหลดเป็น % ด้วยนะครับ การทำงานประมาณนี้ครับ

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>
รบกวนด้วยนะครับ ขอบคุณครับ
