Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,027

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

PHP / HTML - How to Auto Create Upload File Element

เริ่มหัวข้อใหม่

Champ

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

ผมขอสอบถามหน่อยครับ ถ้าต้องการให้ 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

Date : 2013-11-27 01:33:52

By : seattlesonic

View : 1051

Reply : 4

No. 1

meannerss

โพสกระทู้ ( 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

Champ

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

ตอบความคิดเห็นที่ : 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

dew

โพสกระทู้ ( 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

Champ

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

ตอบความคิดเห็นที่ : 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

รายละเอียด

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

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

Notice

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

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก