[input] input type file 커스텀에 대한 모든 것 모음 집(취사선택)

첨부 파일 확장자 제한하기

accept=".jpg, .jpeg, .png" 등등...

• accept="image/png" or accept=".png" — Accepts PNG files.
• accept="image/png, image/jpeg" or accept=".png, .jpg, .jpeg" — Accept PNG or JPEG files.
• accept="image/*" — Accept any file with an image/* MIME type. (Many mobile devices also let the user take a picture with the camera when this is used.)
• accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" — accept anything that smells like an MS Word document.

https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input/file

 

선택된 파일에서 파일명만 축출 -jquery 이용(이걸 하고 싶다... 아시는 분...?: 여기도 onchange 메소드네??!)

$(document).ready(function(){ 
	var fileTarget = $('.filebox .upload-hidden'); 
   	 fileTarget.on('change', function(){ // 값이 변경되면
    	if(window.FileReader){ // modern browser 
        	var filename = $(this)[0].files[0].name; 
        } else { // old IE 
        	var filename = $(this).val().split('/').pop().split('\\').pop(); // 파일명만 추출
        } 
        // 추출한 파일명 삽입 
        $(this).siblings('.upload-name').val(filename); 
    }); 
});

//출처: https://killsia.tistory.com/entry/example-input-typefile-처리에-관한-예제들 [One Day One Line]

(위에 코드 쓴 사람 거) 뭔가 보면 좋을 거 같은데... 어떻게 쓴는지 모르겠따.

https://killsia.tistory.com/entry/example-input-typefile-%EC%B2%98%EB%A6%AC%EC%97%90-%EA%B4%80%ED%95%9C-%EC%98%88%EC%A0%9C%EB%93%A4

example - input type="file" 처리에 관한 예제들

 

 

이건 인풋 TEXT로 FILE 영역을 덮는 거 같은데?

https://m.blog.naver.com/PostView.nhn?blogId=lcg2004&logNo=220755100632&proxyReferer=https%3A%2F%2Fwww.google.com%2F

파일첨부

 

 

 

이거로 해보자, 없애는건 해봣으니....

넷째 - 마지막 단계: 선택된 파일의 이름을 가지고 텍스트 상자를 채워라

 

이전의 단계를 다 해왔다면, 파일을 선택후엔 텍스트 상자에 아무것도 안나오게 될겁니다.
왜냐하면 파일명이 실제로는 숨겨진 type=file 인풋안에 쓰여지고 있기 때문입니다.

 

따라서, 이 마지막 단계에선 간단한 자바스크립트 명령을 type=file 인풋의 onchange 이벤트에 더해줄 겁니다.
이 명령은 텍스트 상자에 값(파일명) 을 복사해줍니다.
그러면 볼 수 있게되는거죠.

 

<input type="text" id="fileName" class="file_input_textbox" readonly="readonly">
 
<div class="file_input_div">
	<input type="button" value="Search files" class="file_input_button" />
	<input type="file" class="file_input_hidden" onchange="javascript: document.getElementById('fileName').value = this.value" />
</div>

 

파일첨부 다중선택 및 삭제구현

https://means24.blog.me/30174100740

 

 

이분이 간략보스 총 집합체 인듯, 근데.... 난 여러개인데 되겠지?

http://mcatcher3.cafe24.com/%ED%8C%8C%EC%9D%BC%EC%B2%A8%EB%B6%80%EB%B0%95%EC%8A%A4input-typefile-%EB%94%94%EC%9E%90%EC%9D%B8-%EB%B0%94%EA%BE%B8%EA%B8%B0/

즐겁게코딩합니다.

위에분 거 결과, 약간 css만 손보면 될듯, 그리고 아래는 위에분 거 코드 복붙한 거 

<div class="fileBox">
	<input type="text" class="fileName" readonly="readonly">
	<label for="uploadBtn" class="btn_file">찾아보기</label>
	<input type="file" id="uploadBtn" class="uploadBtn">
</div>

.fileBox .fileName {display:inline-block;width:190px;height:30px;padding-left:10px;margin-right:5px;line-height:30px;border:1px solid #aaa;background-color:#fff;vertical-align:middle}
.fileBox .btn_file {display:inline-block;border:1px solid #000;width:100px;height:30px;font-size:0.8em;line-height:30px;text-align:center;vertical-align:middle}
.fileBox input[type="file"] {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

var uploadFile = $('.fileBox .uploadBtn');
uploadFile.on('change', function(){
	if(window.FileReader){
		var filename = $(this)[0].files[0].name;
	} else {
		var filename = $(this).val().split('/').pop().split('\\').pop();
	}
	$(this).siblings('.fileName').val(filename);
});