[javascript] 파일 업로드 전 파일 확장자 확인

Question 1

서블릿에 이미지를 업로드하고 있습니다. 업로드 된 파일이 이미지인지 여부는 파일 헤더의 매직 넘버를 확인하여 서버 측에서만 확인합니다. 서블릿에 양식을 제출하기 전에 클라이언트 측에서 확장을 검증하는 방법이 있습니까? Enter 키를 누르면 업로드가 시작됩니다.

클라이언트 측에서 Javascript와 jQuery를 사용하고 있습니다.

업데이트 :
마침내 바이트를 읽고 이미지가 아닌 경우 업로드를 거부하는 서버 측 유효성 검사로 끝났습니다.

Question 2

파일 확장자 만 확인할 수 있지만 사용자는 virus.exe의 이름을 virus.jpg로 쉽게 변경하고 유효성 검사를 “통과”할 수 있습니다.

그만한 가치는 파일 확장자를 확인하고 유효한 확장자 중 하나를 충족하지 않으면 중단하는 코드입니다. (잘못된 파일을 선택하고 제출하여 경고가 작동하는지 확인하십시오)

var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"];
function Validate(oForm) {
    var arrInputs = oForm.getElementsByTagName("input");
    for (var i = 0; i < arrInputs.length; i++) {
        var oInput = arrInputs[i];
        if (oInput.type == "file") {
            var sFileName = oInput.value;
            if (sFileName.length > 0) {
                var blnValid = false;
                for (var j = 0; j < _validFileExtensions.length; j++) {
                    var sCurExtension = _validFileExtensions[j];
                    if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
                        blnValid = true;
                        break;
                    }
                }

                if (!blnValid) {
                    alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
                    return false;
                }
            }
        }
    }

    return true;
}

<form onsubmit="return Validate(this);">
  File: <input type="file" name="my file" /><br />
  <input type="submit" value="Submit" />
</form>

스 니펫 확장

코드를 사용하면 사용자가 파일을 선택하지 않고 보낼 수 있습니다. 필요한 경우 줄을 제거하십시오. if (sFileName.length > 0) { 닫는 대괄호를 연결합니다. 코드는 이름에 관계없이 양식에있는 모든 파일 입력의 유효성을 검사합니다.

이것은 jQuery로 더 적은 줄로 수행 할 수 있지만 “원시”JavaScript에 충분히 익숙하고 최종 결과는 동일합니다.

더 많은 파일이 있거나 양식 제출뿐만 아니라 파일 변경시 확인을 트리거하려는 경우 대신 다음 코드를 사용하십시오.

var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"];
function ValidateSingleInput(oInput) {
    if (oInput.type == "file") {
        var sFileName = oInput.value;
         if (sFileName.length > 0) {
            var blnValid = false;
            for (var j = 0; j < _validFileExtensions.length; j++) {
                var sCurExtension = _validFileExtensions[j];
                if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
                    blnValid = true;
                    break;
                }
            }

            if (!blnValid) {
                alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
                oInput.value = "";
                return false;
            }
        }
    }
    return true;
}

File 1: <input type="file" name="file1" onchange="ValidateSingleInput(this);" /><br />
File 2: <input type="file" name="file2" onchange="ValidateSingleInput(this);" /><br />
File 3: <input type="file" name="file3" onchange="ValidateSingleInput(this);" /><br />

스 니펫 확장

잘못된 파일 확장자의 경우 경고를 표시하고 입력을 재설정합니다.

Question 3

기존 답변 중 어느 것도 요청의 단순성을 위해 충분히 간결 해 보이지 않았습니다. 주어진 파일 입력 필드에 세트의 확장자가 있는지 확인하는 것은 다음과 같이 수행 할 수 있습니다.

function hasExtension(inputID, exts) {
    var fileName = document.getElementById(inputID).value;
    return (new RegExp('(' + exts.join('|').replace(/\./g, '\\.') + ')$')).test(fileName);
}

따라서 사용 예 upload는 다음 id과 같습니다 (파일 입력의 위치).

if (!hasExtension('upload', ['.jpg', '.gif', '.png'])) {
    // ... block upload
}

또는 jQuery 플러그인으로 :

$.fn.hasExtension = function(exts) {
    return (new RegExp('(' + exts.join('|').replace(/\./g, '\\.') + ')$')).test($(this).val());
}

사용 예 :

if (!$('#upload').hasExtension(['.jpg', '.png', '.gif'])) {
    // ... block upload
}

은 .replace(/\./g, '\\.')그 기본 확장이 모든 문자와 일치하는 점없이 전달 될 수 있도록 정규 표현식에 대한 점을이 탈출하는 것입니다.

짧게 유지하기 위해 오류를 검사하지 않습니다. 아마도 이것을 사용하면 입력이 먼저 존재하고 확장 배열이 유효한지 확인할 것입니다!

Question 4

$(function () {
    $('input[type=file]').change(function () {
        var val = $(this).val().toLowerCase(),
            regex = new RegExp("(.*?)\.(docx|doc|pdf|xml|bmp|ppt|xls)$");

        if (!(regex.test(val))) {
            $(this).val('');
            alert('Please select correct file format');
        }
    });
});

Question 5

나는 여기에있는 답 중 어느 것도 시적이지 않다고 확신했기 때문에 여기에 왔습니다.

function checkextension() {
  var file = document.querySelector("#fUpload");
  if ( /\.(jpe?g|png|gif)$/i.test(file.files[0].name) === false ) { alert("not an image!"); }
}

<input type="file" id="fUpload" onchange="checkextension()"/>

스 니펫 확장

Question 6

파일이 선택되었는지 확인하십시오

       if (document.myform.elements["filefield"].value == "")
          {
             alert("You forgot to attach file!");
             document.myform.elements["filefield"].focus();
             return false;
         }

파일 확장자 확인

  var res_field = document.myform.elements["filefield"].value;
  var extension = res_field.substr(res_field.lastIndexOf('.') + 1).toLowerCase();
  var allowedExtensions = ['doc', 'docx', 'txt', 'pdf', 'rtf'];
  if (res_field.length > 0)
     {
          if (allowedExtensions.indexOf(extension) === -1)
             {
               alert('Invalid file Format. Only ' + allowedExtensions.join(', ') + ' are allowed.');
               return false;
             }
    }

Question 7

이 예를 좋아합니다.

<asp:FileUpload ID="fpImages" runat="server" title="maximum file size 1 MB or less" onChange="return validateFileExtension(this)" />

<script language="javascript" type="text/javascript">
    function ValidateFileUpload(Source, args) {
        var fuData = document.getElementById('<%= fpImages.ClientID %>');
        var FileUploadPath = fuData.value;

        if (FileUploadPath == '') {
            // There is no file selected 
            args.IsValid = false;
        }
        else {
            var Extension = FileUploadPath.substring(FileUploadPath.lastIndexOf('.') + 1).toLowerCase();
            if (Extension == "gif" || Extension == "png" || Extension == "bmp" || Extension == "jpeg") {
                args.IsValid = true; // Valid file type
                FileUploadPath == '';
            }
            else {
                args.IsValid = false; // Not valid file type
            }
        }
    }
</script>

Question 8

입력 유형 = “파일”을 사용하여 업로드 파일을 선택합니까? 그렇다면 accept 속성을 사용하지 않는 이유는 무엇입니까?

<input type="file" name="myImage" accept="image/x-png,image/gif,image/jpeg" />