Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,038

HOME > PHP > PHP Forum > PHP / HTML - How to Auto Create Upload File Element


PHP / HTML - How to Auto Create Upload File Element

 
Topic : 103103



โพสกระทู้ ( 49 )
บทความ ( 1 )



สถานะออฟไลน์
Twitter Facebook


UploadFile UploadFile2

ผมขอสอบถามหน่อยครับ ถ้าต้องการให้ input "file" สร้างเพิ่มหลังจากการคลิก input "file" ด้านบนสุด
โดยไม่จำเป็นต้องคลิก " + " ดังรูปที่ 2 ผมต้องอย่างไรครับ

upload_form.html
<html>
	<head>
		<title>Multiple Upload Files Form</title>
		<style type="text/css">
			#uploadform 
			{
				 position:relative;
				 width:0px;
				 margin:10px auto 15px 1px;
				 text-align:center;
			}
			#uploadform input 
			{
				 display:block; 
				 margin:5px auto;
			}
		</style>
	</head>
	<body>
		<form id="uploadform" action="upload_result.php" method="post" enctype="multipart/form-data" target="uploadframe" onsubmit="uploading(this); return false">
			<input type="file" class="file_up" name="file_up[]" />
			<input type="submit" value="อัปโหลด" id="sub" style="width: 68px; font-weight: bold; font-style: italic; text-decoration: underline" />
		</form>
		<script type="text/javascript" src="upload.js"></script>
		<button onclick="add_upload('uploadform'); return false;">&nbsp;+&nbsp;</button>
	</body>
</html>




Tag : PHP, HTML/CSS, JavaScript, Ajax, jQuery, Windows


ประวัติการแก้ไข
2013-11-27 01:35:32
2013-11-27 01:36:28
Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2013-11-27 01:33:52 By : seattlesonic View : 1104 Reply : 4
 

 

No. 1



โพสกระทู้ ( 1,666 )
บทความ ( 0 )



สถานะออฟไลน์


ตรงนี้คือปุ่มบวกไช่ไหม
<button onclick="add_upload('uploadform'); return false;">&nbsp;+&nbsp;</button>


ตรงนี้คือไฟล์ไช่ไหม
<input type="file" class="file_up" name="file_up[]" />



ย้ายที่ onclick ให้มาอยู่กับตัวเพิ่มไฟล์ซะแล้วเอาปุ่มบวกออก
<input type="file" class="file_up" name="file_up[]"   onclick="add_upload('uploadform'); return false;"  />



แต่เท่าดูยังไม่เห็นฟังชั่น add_upload('uploadform') ในโค้ดนี้เลย
แต่ถ้ามีอยู่แล้วและปุ่ม+ใช้งานได้อยูู้่ก่อนแล้วก็ไม่น่าจะมีปัญหาครับ แค่ย้ายที่ Onclick เฉยๆ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2013-11-27 02:56:34 By : meannerss
 

 

No. 2



โพสกระทู้ ( 49 )
บทความ ( 1 )



สถานะออฟไลน์
Twitter Facebook

ตอบความคิดเห็นที่ : 1 เขียนโดย : meannerss เมื่อวันที่ 2013-11-27 02:56:34
รายละเอียดของการตอบ ::
ขอบคุณครับ ผมลองแล้วครับ มันก็ได้อยู่นะครับ แต่ได้เฉพาะ input file บนสุดเท่านั้น
พออันที่สองลงมามันจะไม่สร้างให้ครับ มันจะ open file dialog อย่างเดียวครับ
ต้องกด + อยู่ดี อยากได้แบบ กด input file แล้วสร้างมาใหม่ 1 element รองรับเลยครับ
แล้วพอกดอันต่อมา อันต่อมาก็สร้าง element ขึ้นมาอีก น่ะครับ

นี่ครับ โค๊ด add_upload
upload.js
function add_upload(form_id) {
  var element = document.getElementById('sub');

  var new_el = document.createElement("input");
  new_el.setAttribute("type", "file");
  new_el.setAttribute("name", "file_up[]");
  document.getElementById(form_id).insertBefore(new_el, element);
}

function uploading(theform){
  document.getElementById('ifrm').innerHTML = '<iframe id="uploadframe" name="uploadframe" src="upload_result.php" frameborder="0"></iframe>';

  theform.submit();		

  document.getElementById('uploadform').innerHTML = '<input type="file" id="test" class="file_up" name="file_up[]" /><input type="submit" value="อัปโหลด" id="sub" />';
  return false;
}


รบกวนด้วยนะครับ ขอบคุณครับ


ประวัติการแก้ไข
2013-11-27 11:29:50
2013-11-27 11:30:34
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2013-11-27 11:29:11 By : seattlesonic
 

 

No. 3



โพสกระทู้ ( 59 )
บทความ ( 0 )



สถานะออฟไลน์


ตอนที่เราสร้าง Input File มาใหม่เราไม่ได้ เพื่ม Attr Onclick ไปด้วยนี่ครับ
Code (PHP)
new_el.setAttribute("type", "file");
new_el.setAttribute("name", "file_up[]");
new_el.setAttribute("onclick", "function()");

ลองเพิ่มดูนะครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2013-11-29 01:34:09 By : mariddew
 

 

No. 4



โพสกระทู้ ( 49 )
บทความ ( 1 )



สถานะออฟไลน์
Twitter Facebook

ตอบความคิดเห็นที่ : 3 เขียนโดย : mariddew เมื่อวันที่ 2013-11-29 01:34:09
รายละเอียดของการตอบ ::
ลองแล้วครับ ยังไม่ได้น่ะครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2013-11-29 22:10:22 By : seattlesonic
 

   

ค้นหาข้อมูล
   
 

แสดงความคิดเห็น
Re : PHP / HTML - How to Auto Create Upload File Element
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
 Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)





ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2025 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่