[javascript] 파일첨부시 특정 파일확장자만 선택 / input type="file" 초기화

[javascript] 파일첨부시 특정 파일확장자만 선택하기 및 input type="file"의 초기화

(1) 파일첨부시 특정 파일확장자만 선택하게 하기

- 출처 : Posted on 2015-02-17 by 문이 : http://blog.munilive.com/input-file-type-accept-attribute/

<input type=”file”> 태그에 accept 라는 속성으로 사용자가 첨부하려는 파일을 특정지을 수 있다.

 

- 사용방법 : input 태그에 accept 속성을 부여
- 속성의 값으로 사용할 수 있는 방법 : 특정 확장자를 지정하는 방법과 미디어 타입을 지정하는 방법 또는 audio/*, video/*, image/* 형식으로 정의

A) 특정한 확장자로 지정 : .gif, .jpg, .png 와 같이 나열 하면 된다. 구분은 ,(콤마)

<input type="file" accept=".gif, .jpg, .png">

B) 

<input type="file" accept="audio/*"> : 모든 오디오 파일을 보여줌

<input type="file" accept="video/*"> : 모든 비디오 파일을 보여줌

<input type="file" accept="image/*"> : 모든 이미지 파일을 보여줌

C) 미디어 타입으로 지정하는 방법 :

<input type="file" accept="image/gif, image/jpeg, image/png">

미디어 파일 타입은 http://www.iana.org/assignments/media-types/media-types.xhtml을 참고

- 해당 속성은 IE10 이상 부터 사용 가능

- 예제 확인 : http://blog.munilive.com/ex/html/input_type_file_accept_attribute.html

(2) input type = "file"에 이미지만 첨부 가능하도록 하는 스크립트

input type file에 이미지만 첨부 가능하도록 하는 스크립트

- 출처 : https://ljmgood123.blog.me/220868249390

- 작성자 : MDB

function chk_file_type(obj) {

var file_kind = obj.value.lastIndexOf('.');

var file_name = obj.value.substring(file_kind+1,obj.length);

var file_type = file_name.toLowerCase();

var check_file_type=new Array();

check_file_type=['jpg','gif','png','jpeg','bmp','tif'];

if(check_file_type.indexOf(file_type)==-1) {

alert('Only image file can be uploaded.');

var parent_Obj=obj.parentNode;

var node=parent_Obj.replaceChild(obj.cloneNode(true),obj);

document.getElementById("wfb-field-219958876").value = "";    //초기화를 위한 추가 코드

document.getElementById("wfb-field-219958876").select();        //초기화를 위한 추가 코드

document.selection.clear();                                                //일부 브라우저 미지원

return false;

}

}

<input type='file' name='files' accept='image/jpeg,image/gif,image/png' onchange='chk_file_type(this)'>

파일첨부에 이미지만 첨부할 수 있도록 처리 input file

- 출처 : http://sqlplus.tistory.com/entry/파일첨부에-이미지만-첨부할-수-있도록-처리-input-file

function fileTypeCheck(obj) {

pathpoint = obj.value.lastIndexOf('.');

filepoint = obj.value.substring(pathpoint+1,obj.length);

filetype = filepoint.toLowerCase();

if(filetype=='jpg' || filetype=='gif' || filetype=='png' || filetype=='jpeg' || filetype=='bmp') {

// 정상적인 이미지 확장자 파일인 경우

} else {

alert('Only image file can be uploaded!');

parentObj  = obj.parentNode

node = parentObj.replaceChild(obj.cloneNode(true),obj);

return false;

}

}

<input type="file" name="filename" onchange="fileTypeCheck(this)" accept="image/gif, image/jpeg, image/png"/>

(3) input type="file"의 초기화

selection.clear() 참조 : ie11 에서 document.selection.clear()가 안먹히네요.

selection.clear() 참조 : [HTML] input type="file"에서 찾아보기 버튼 바꾸기

보안문제로 인해 input box는 script가 값을 바꿔버리는 것을 허용하지 않음
다른거에 하던 식으로 document.getElementById("file").value = ""; 는 작동 안됨
대신에 아래와 같이 사용

document.getElementById("file").select();

//document.execCommand('Delete');   

document.selection.clear();

위와 같은 자바스크립트 코드를 이용하면 해당 인풋파일의 값을 지워줄 수 있다.
2번줄에 주석처리한 부분은 3번줄 대신 2번줄을 사용해도 된다. 둘줄 하나로 하면 된다.
물론 이 소스도 돌아가지 않는다. 위에 말한대로 보안문제 때문에 submit()할 때 문제가 생긴다.