[Javascript] 문자열 찾기

Browser에서 Server로 파일을 업로드 할 때, 취지에 맞지 않는 파일을 제한해야 할 때가 있다. 예를 들어 영화 포스터 이미지 파일(jpg, png 등) 만 업로드 해야한다면 방법은 다양할 것이다. 정규식으로 제어할 수도 있고, 서버 단에서 제어할 수도 있다. 이번에는 뷰 단에서 자바스크립트를 이용해 간단한 방법으로 이미지 파일만 전송되도록 한다.

 

---

 

<input type="file" name="uploadFiles" multiple>
<button class="uploadBtn">Upload</button>

<div class="uploadResult">

</div>

파일 업로드는 HTML의 <form> 태그를 이용할 수도 있지만 ajax를 사용하여 데이터를 보낸 후 처리했다.

 

<script type="text/javascript">
$(document).ready(function(){
    $(".uploadBtn").on("click", ()=>{

        const formData = new FormData();

        const inputFile = $("input[name='uploadFiles']");
        const files = inputFile[0].files;

        for(let i in files){
            console.log(files[i]);

            let fileType = '';
            fileType += files[i].type;

            formData.append("uploadFiles", files[i]);
        }

        $.ajax({
            url: '/uploadAjax',
            processData: false,
            contentType: false,
            dataType: 'json',
            data: formData,
            type: 'POST',
            success: (result) => {
                console.log(result);
                showUploadedImages(result);
            },
            error: (jqXHR, textStatus, errThrown) => {
                console.log(jqXHR);
                console.log(textStatus);
                console.log(errThrown);
            }
        });
    });

    const showUploadedImages = function(arr) {
        const divArea = $(".uploadResult");

        for(let i = 0; i < arr.length; i++){
            divArea.append('<img src="/display?filename=' + arr[i].thumbnailURL + '">');
        }
    }
});
</script>

<input>에 여러 파일을 입력해서 업로드 후 콘솔 로그를 보면 전송한 파일의 정보가 찍힌다.

 

1111.png와 abc.txt 파일을 업로드 한 결과이다.

위와 같이 File의 정보들을 Javascript 객체에 담아 받아볼 수 있다. 이 중에서 'type'을 보면 해당 파일이 어떤 파일인지를 알려준다.

 

예제에서는 이미지 파일만 필요로 하므로, type의 값을 가져와 contains()를 써서 true/false를 가지고 조건문 처리하면 되겠다.

 

for(let i = 0; i < files.length; i++) {
	
    if(files[i].type.contains("image"))
    	formData.append("uploadFiles", files[i]);
        
}

하지만 아쉽게도... 자바스크립트의 문자열 함수는 contains()를 갖고있지 않다.

 

그럼 어떤 함수를 써야할까? 하고 검색한 결과

• indexOf(searchValue[, fromIndex])
  • 호출한 String 객체에서 주어진 값과 일치하는 첫 번째 인덱스를 반환.
  • Returns
    • 일치하는 값이 있으면 인덱스 리턴
    • 없으면 -1 리턴

• search(str)
  • 해당 문자열이 있으면 시작되는 index를 반환한다.
  • 해당 문자열이 없다면 '-1'을 리턴한다.
• includes(searchString[, position])
  • Params
    • searchString : 이 문자열에서 찾을 다른 문자열
    • position : (option) searchString을 찾기 시작할 위치. Default = 0
  • Returns
    • 문자열이 있으면 True
    • 없으면 False

정도를 예로 들 수 있겠다.

 

각 함수를 예로 써보자. (files[i].type은 문자열 타입이 아니기 때문에 문자열 변수 fileType에 붙여주었다.)

 

* indexOf()

for(let i in files){

  let fileType = '';
  fileType += files[i].type;

  if(fileType.indexOf("image") >= 0) //Image (true)
  	formData.append("uploadFiles", files[i]);
  else                              //Image (false)
  	console.log(files[i].name + "은 이미지가 아닙니다.");
}

 

* search()

for(let i in files){

  let fileType = '';
  fileType += files[i].type;

  if(fileType.search("image") >= 0) //Image (true)
  	formData.append("uploadFiles", files[i]);
  else                              //Image (false)
  	console.log(files[i].name + "은 이미지가 아닙니다.");
}

 

* includes()

for(let i in files){

  let fileType = '';
  fileType += files[i].type;

  if(fileType.includes("image")) //Image (true)
  	formData.append("uploadFiles", files[i]);
  else                              //Image (false)
  	console.log(files[i].name + "은 이미지가 아닙니다.");
}

 

이렇게 해서 Image로 판단되면 formData에 파일 정보를 붙여서 서버 단으로 보내는 작업을 한다.

 

다시 1111.png와 abc.txt를 보내보자.

2개 파일을 모두 업로드 요청했으나, abc.txt는 이미지 파일이 아니므로 입구컷 당했다. 저장 또한 되지 않았다.