كيف يكون مسج لتقييد أنواع الملفات على تحميل ؟

Question

وأود أن يكون مسج الحد ملف مجال تحميل فقط jpg/jpeg, png, and gif.أنا أفعل الخلفية التحقق مع PHP بالفعل.أنا أدير عملي من خلال زر إرسال JavaScript وظيفة بالفعل لذلك أنا حقا بحاجة فقط إلى معرفة كيفية التحقق من أنواع الملفات قبل تقديم أو تنبيه.

Answer 1

ويمكنك الحصول على قيمة حقل ملف مجرد نفس في أي ميدان آخر. لا يمكنك تغييرها، ولكن.

وهكذا إلى سطحي حدد إذا كان ملف لديه حق التمديد، هل يمكن أن تفعل شيئا من هذا القبيل:

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

Answer 2

ولا المساعد اللازم لمجرد هذه المهمة. مرقع هذا معا من زوجين النصوص الأخرى:

$('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 = '';
    }
});

والخدعة هنا هو وضع زر التحميل إلى تعطيل ما لم يتم تحديد نوع ملف صالح.

Answer 3

هل يمكن استخدام البرنامج المساعد التحقق من صحة مسج: http://docs.jquery.com/Plugins/Validation

ويحدث أن يكون هناك حكم استعرض () أن يفعل بالضبط ما تحتاجه: http://docs.jquery.com/Plugins/Validation/Methods/accept#extension

لاحظ أن السيطرة على ملف التمديد ليس اقية من الرصاص لأنه لا علاقة لMIMETYPE من الملف. لذلك هل يمكن أن يكون هذا هو بابوا نيو غينيا وثيقة كلمة و.DOC هذا صورة بابوا نيو غينيا صحيحة تماما. حتى لا ننسى لبذل المزيد من عناصر التحكم من جانب الخادم؛)

Answer 4

على الواجهة الأمامية هو مناسب جدا لوضع 'تقبل'السمة إذا كنت تستخدم ملف المجال.

على سبيل المثال:

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

بضع ملاحظات هامة:

• قبول سمة معتمد في برنامج Internet Explorer 10, Firefox, Opera, Chrome و Safari 6.
• وسوف تظهر نص امتداد الملف بشكل مختلف في ملف الحوار متصفح من المتصفحات المختلفة.

Answer 5

لا أريد أن تحقق بدلا من ذلك على MIME من التركيز على كل ما ارشادية للمستخدم هو الكذب؟ إذا كان الأمر كذلك فإنه من خط أقل من واحد:

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

Answer 6

ولحالتي أنا استخدم الرموز التالية:

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

Answer 7

وأنا أحاول أن أكتب يعمل الكود على سبيل المثال ، اختبار و كل شيء يعمل.

هير كود:

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
    }
}

Answer 8

وهذا الرمز يعمل بشكل جيد، ولكن المسألة الوحيدة هي إذا كان تنسيق الملف هو الآخر من الخيارات المحددة، لكنه يظهر رسالة تنبيه لكنه يعرض اسم الملف في حين كان ينبغي إهمال ذلك.

$('#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; }
});

Answer 9

هذا المثال يسمح بتحميل صورة 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;
                    }
                });

Answer 10

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

Answer 11

إذا كنت تتعامل مع متعددة (أتش تي أم أل 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!');

        }
    }

Answer 12

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;
    }

Answer 13

وهنا هو رمز بسيط جافا سكريبت التحقق من صحة، وبعد ذلك بالتحقق من صحة سيكون نظيفا ملف الإدخال.

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