[javascript] 업로드시 jQuery가 파일 형식을 제한하도록하는 방법은 무엇입니까?

Program / 글쓴이

jQuery가 파일 업로드 필드를 jpg / jpeg, png 및 gif로만 제한하고 싶습니다. 백엔드 확인을하고 있습니다.PHP 이미하고 있습니다. JavaScript이미 기능을 통해 제출 버튼을 실행 중이므로 제출 또는 경고하기 전에 파일 형식을 확인하는 방법을 알아야합니다.

답변

파일 필드의 값은 다른 필드와 동일하게 얻을 수 있습니다. 그러나 변경할 수는 없습니다.

따라서 파일의 확장자가 올바른지 피상적으로 확인하려면 다음과 같이 할 수 있습니다.

var ext = $('#my_file_field').val().split('.').pop().toLowerCase();
if($.inArray(ext, ['gif','png','jpg','jpeg']) == -1) {
    alert('invalid extension!');
}

답변

이 작업에만 플러그인이 필요하지 않습니다. 몇 가지 다른 스크립트에서 이것을 함께 묶었습니다.

$('INPUT[type="file"]').change(function () {
    var ext = this.value.match(/\.(.+)$/)[1];
    switch (ext) {
        case 'jpg':
        case 'jpeg':
        case 'png':
        case 'gif':
            $('#uploadButton').attr('disabled', false);
            break;
        default:
            alert('This is not an allowed file type.');
            this.value = '';
    }
});

여기서 올바른 방법은 유효한 파일 형식을 선택하지 않는 한 업로드 단추를 비활성화로 설정하는 것입니다.

답변

jQuery 용 유효성 검사 플러그인을 사용할 수 있습니다.
http://docs.jquery.com/Plugins/Validation

정확히 필요한 것을 수행하는 accept () 규칙이 있습니다.
http://docs.jquery.com/Plugins/Validation/Methods/accept#extension

파일 확장자를 제어하는 ​​것은 파일의 MIME 유형과 관련이 없으므로 방탄이 아닙니다. 따라서 단어 문서 인 .png와 완벽하게 유효한 PNG 이미지 인 .doc를 가질 수 있습니다. 따라서 서버 측에서 더 많은 컨트롤을 만드는 것을 잊지 마십시오.)

답변

프론트 엔드의 경우 파일 필드를 사용하는 경우 ‘ accept ‘속성 을 넣는 것이 매우 편리 합니다.

예:

<input id="file" type="file" name="file" size="30"
       accept="image/jpg,image/png,image/jpeg,image/gif"
/>

몇 가지 중요한 메모 :

답변

사용자가 거짓말을하고있는 범위보다 MIME을 확인하고 싶지 않습니까? 그렇다면 한 줄 미만입니다.

<input type="file" id="userfile" accept="image/*|video/*" required />

답변

내 경우에는 다음 코드를 사용했습니다. 

    if (!(/\.(gif|jpg|jpeg|tiff|png)$/i).test(fileName)) {
    alert('You must select an image file only');
    }

답변

작업 코드 예제를 작성하려고 시도하고 테스트하고 모든 것이 작동합니다.

토끼는 코드입니다 :

HTML :

<input type="file" class="attachment_input" name="file" onchange="checkFileSize(this, @Model.MaxSize.ToString(),@Html.Raw(Json.Encode(Model.FileExtensionsList)))" />

자바 스크립트 :

 //function for check attachment size and extention match
function checkFileSize(element, maxSize, extentionsArray) {
    var val = $(element).val(); //get file value

    var ext = val.substring(val.lastIndexOf('.') + 1).toLowerCase(); // get file extention 
    if ($.inArray(ext, extentionsArray) == -1) {
        alert('false extension!');
    }

    var fileSize = ($(element)[0].files[0].size / 1024 / 1024); //size in MB
    if (fileSize > maxSize) {
        alert("Large file");// if Maxsize from Model > real file size alert this
    }
}