jQuery의 :file 선택자

jQuery의 :file 선택자는 파일 업로드(input type="file") 요소를 선택하는 데 사용됩니다. 이 선택자를 사용하면 웹 페이지에서 파일 업로드를 담당하는 요소를 쉽게 선택하여 조작할 수 있습니다. 다양한 예제를 통해 이 선택자의 활용법을 살펴보겠습니다.

예제 1: 파일 업로드 요소 스타일링하기

<input type="file" id="fileInput">

$(":file").css("border", "2px solid red");

이 예제는 모든 파일 업로드 요소에 빨간 테두리를 추가하여 스타일링합니다.

예제 2: 파일 업로드 요소에 이벤트 추가하기

<input type="file" id="fileInput">
<div id="fileInfo"></div>

$(":file").change(function() {
  var fileName = $(this).val().split("\\").pop();
  $("#fileInfo").text("선택된 파일: " + fileName);
});

이 예제는 파일 업로드 요소에 파일이 선택되면 해당 파일의 정보를 표시하는 이벤트를 추가합니다.

예제 3: 파일 업로드 요소 유효성 검사하기

<input type="file" id="fileInput">
<button id="uploadButton">파일 업로드</button>
<div id="errorMessage"></div>

$("#uploadButton").click(function() {
  if($(":file").val() === "") {
    $("#errorMessage").text("파일을 선택해주세요.");
  } else {
    $("#errorMessage").text("");
    // 파일 업로드 로직 실행
  }
});

이 예제는 파일 업로드 요소에 파일이 선택되었는지 유효성을 검사하고, 선택되지 않은 경우 오류 메시지를 표시합니다.

jQuery의 :file 선택자를 활용하면 파일 업로드 요소를 선택하여 다양한 작업을 할 수 있습니다.