JavaScript/jQuery

【jQuery/Selector #23】:file Selector

1Q74 2023. 2. 23. 12:23

1. Description

:file은 [type="file"]과 동일하다.

 

$(":file")과 같이 사용하기 보다는 선행하는 다른 Selector들과 조합해서 사용하는 것이 좋다고 합니다(자세한 내용은 여기나 「4. Reference」를 참고하세요).

 

속도향상을 위해서는 [type="file"]과 같이 사용하는 것이 좋다고 합니다.


2. Example

#1버튼을 클릭하면 <div>태그 하위에 있는 file타입의 InputElement를 찾아서 배경색을 변경한다. 버튼을 클릭할 때마다 해당 스타일이 토글된다.


[1q74.tistory.com] javascript/jquery/selector/file

Where is file element?

  • Empty Not!


[HTML Code]
[//HTML Code]

3. Code

더보기
<!-- ---------------------------------------------------------
  --
  -- Author: 1q74.tistory.com
  --
  --------------------------------------------------------- -->
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>[1q74.tistory.com] javascript/jquery/selector/file</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>

	<div name="_1q74-example-root">
		<div name="_1q74-example-1">
			<h4>Where is file element?</h4>
			<ul>
				<li></li>
				<li>Empty Not!</li>
				<li></li>
				<li></li>
				<li><input type="file" name="file0"/></li>
				<li></li>
				<li></li>
				<li><input type="file" name="file1"/></li>
				<li></li>
				<li></li>
			</ul>
		</div>

		<div name="_1q74-example-bottom">
			<br/>
			<button name="btn-find">#1. $("[name='_1q74-example-1'] :file")</button>
		</div>
	</div>

	<hr/>
	<h5>[HTML Code]</h5>
	<div name="_1q74-source">
	</div>
	<h5>[//HTML Code]</h5>

<script>
const btnFind = $("[name='btn-find']");
const pTags = $("[name='_1q74-example-1'] :file");

btnFind.click(function() {
	if(!pTags.is("[style]")) {
		pTags.css("background-color", "yellow")
	} else {
		pTags.removeAttr("style");
	}
});
	
// ------------------------------------------------------
// 소스출력
// ------------------------------------------------------
var textSource = $("[name='_1q74-source']");
var exampleHtml = $("[name='_1q74-example-root']").html();
var specialCharLines = textSource.text(exampleHtml).html().split("\n");

textSource.html(specialCharLines.join("<br/>").replaceAll("\t", "&nbsp;&nbsp;"));
</script>
<style>
[name|="_1q74-example"] button
,[name="_1q74-source"] button {
	background: lightgray;
	border: 5px outset;
	min-height: 30px;
}

[name|="_1q74-example"] button:active
,[name="_1q74-source"] button:active {
	border: 2px inset;
	min-height: 30px;
}
</style>

</body>
</html>

4. File

[javascript][jquery][selector]file.html
0.00MB


5. Reference

https://api.jquery.com/file-selector/