[html/php 개발] 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.

선택된 파일에서 파일명만 축출 -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%A4example – input type=”file” 처리에 관한 예제들출처 : http://ankyu.entersoft.kr/board_Lecture/lecture_content.asp?lecture_idx=248&gubun_type=javascript 1. type=”file” 선택된 파일 초기화 if (/(MSIE|Trident)/.test(navigator.userAgent)) { // ie 일..killsia.tistory.com

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

https://m.blog.naver.com/PostView.nhn?blogId=lcg2004&logNo=220755100632&proxyReferer=https%3A%2F%2Fwww.google.com%2F파일첨부숨기기, 디자인 바꾸기[원본] http://lemonweb.tistory.com/24CSS로 input type=”file” 바꾸,…blog.naver.com

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

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

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

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

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

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

https://means24.blog.me/30174100740blog.naver.com

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

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/즐겁게코딩합니다.HTML,CSS,JS,JQUERY,UI,웹퍼블리싱,웹퍼블리셔,FRONT-END관련 블로그입니다.mcatcher3.cafe24.com

<div>
	<input type="text" readonly="readonly">
	<label for="uploadBtn">찾아보기</label>
	<input type="file" id="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);
});

-참고 링크

https://helloinyong.tistory.com/275