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

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" 
/>

몇 가지 중요한 메모 :

• accept 속성은 Internet Explorer 10, Firefox, Opera, Chrome 및 Safari 6에서 지원됩니다.
• 파일 브라우저 대화 상자에서 다른 브라우저와 다르게 파일 확장명에 대한 텍스트가 표시됩니다.

사용자가 거짓말을하고있는 범위보다 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
    }
}

이 코드는 정상적으로 작동하지만 파일 형식이 지정된 옵션이 아닌 경우 경고 메시지를 표시하지만 무시해야하는 동안 파일 이름을 표시합니다.

$('#ff2').change(
                function () {
                    var fileExtension = ['jpeg', 'jpg', 'pdf'];
                    if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
                        alert("Only '.jpeg','.jpg','.pdf' formats are allowed.");
                        return false; }
});

이 예에서는 PNG 이미지 만 업로드 할 수 있습니다.

HTML

<input type="file" class="form-control" id="FileUpload1" accept="image/png" />

JS

$('#FileUpload1').change(
                function () {
                    var fileExtension = ['png'];
                    if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
                        alert("Only '.png' format is allowed.");
                        this.value = ''; // Clean field
                        return false;
                    }
                });

<form enctype="multipart/form-data">
   <input name="file" type="file" />
   <input type="submit" value="Upload" />
</form>
<script>
$('input[type=file]').change(function(){
    var file = this.files[0];
    name = file.name;
    size = file.size;
    type = file.type;
    //your validation
});
</script>

여러 (html 5) 파일 업로드를 처리하는 경우 가장 많이 제안 된 의견을 취하여 조금 수정했습니다.

    var files = $('#file1')[0].files;
    var len = $('#file1').get(0).files.length;

    for (var i = 0; i < len; i++) {

        f = files[i];

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

        }
    }

    $("input[name='btnsubmit']").attr('disabled', true);
    $('input[name="filphoto"]').change(function () {
    var ext = this.value.match(/\.(.+)$/)[1];
    switch (ext) 
    {
    case 'jpg':
    case 'jpeg':
    case 'png':
    case 'bmp':
        $("input[name='btnsubmit']").attr('disabled', false);
    break;
    default:
        alert('This is not an allowed file type.');
        $("input[name='btnsubmit']").attr('disabled', true);
        this.value = '';

function validateFileExtensions(){
        var validFileExtensions = ["jpg", "jpeg", "gif", "png"];
        var fileErrors = new Array();

        $( "input:file").each(function(){
            var file = $(this).value;
            var ext = file.split('.').pop();
            if( $.inArray( ext, validFileExtensions ) == -1) {
                fileErrors.push(file);
            }
        });

        if( fileErrors.length > 0 ){
            var errorContainer = $("#validation-errors");
            for(var i=0; i < fileErrors.length; i++){
                errorContainer.append('<label for="title" class="error">* File:'+ file +' do not have a valid format!</label>');
            }
            return false;
        }
        return true;
    }

다음은 자바 스크립트 유효성 검사를위한 간단한 코드이며, 유효성 검사 후 입력 파일을 정리합니다.

<input type="file" id="image" accept="image/*" onChange="validate(this.value)"/>

function validate(file) {
    var ext = file.split(".");
    ext = ext[ext.length-1].toLowerCase();      
    var arrayExtensions = ["jpg" , "jpeg", "png", "bmp", "gif"];

    if (arrayExtensions.lastIndexOf(ext) == -1) {
        alert("Wrong extension type.");
        $("#image").val("");
    }
}