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

업로드시 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!');

        }
    }

---

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("");
    }
}

참고URL : https://stackoverflow.com/questions/651700/how-to-have-jquery-restrict-file-types-on-upload