การตรวจสอบนามสกุลไฟล์ก่อนอัพโหลดไฟล์

ฉันกำลังอัปโหลดภาพไปยัง servlet การตรวจสอบความถูกต้องว่าไฟล์ที่อัปโหลดเป็นรูปภาพนั้นทำได้ในฝั่งเซิร์ฟเวอร์เท่านั้นหรือไม่โดยตรวจสอบตัวเลขมหัศจรรย์ในส่วนหัวของไฟล์ มีวิธีใดในการตรวจสอบความถูกต้องของส่วนขยายในฝั่งไคลเอ็นต์ก่อนส่งแบบฟอร์มไปยัง servlet หรือไม่ ทันทีที่ฉันกด Enter มันจะเริ่มอัปโหลด

ฉันใช้ Javascript และ jQuery ในฝั่งไคลเอนต์

อัปเดต: ในที่สุดฉันก็ได้รับการตรวจสอบความถูกต้องทางฝั่งเซิร์ฟเวอร์ซึ่งอ่านไบต์และปฏิเสธการอัปโหลดหากไม่ใช่รูปภาพ

เป็นไปได้ที่จะตรวจสอบเฉพาะนามสกุลของไฟล์ แต่ผู้ใช้สามารถเปลี่ยนชื่อ 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 />

สิ่งนี้จะแสดงการแจ้งเตือนและรีเซ็ตอินพุตในกรณีที่นามสกุลไฟล์ไม่ถูกต้อง

ไม่มีคำตอบใดที่ดูกระชับเพียงพอสำหรับความเรียบง่ายของคำขอ การตรวจสอบว่าช่องป้อนไฟล์ที่ระบุมีนามสกุลจากชุดสามารถทำได้ดังนี้:

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, '\\.')จะมีการหลบหนีจุดสำหรับ regexp เพื่อให้ส่วนขยายพื้นฐานสามารถผ่านได้โดยไม่ต้องจุดที่ตรงกับตัวอักษรใด ๆ

ไม่มีข้อผิดพลาดในการตรวจสอบสิ่งเหล่านี้เพื่อให้สั้นสันนิษฐานว่าหากคุณใช้มันคุณจะต้องแน่ใจว่าอินพุตมีอยู่ก่อนและอาร์เรย์ส่วนขยายนั้นถูกต้อง!

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

ฉันมาที่นี่เพราะฉันแน่ใจว่าไม่มีคำตอบใด ๆ ที่นี่เลยทีเดียว ...

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

ตรวจสอบว่าไฟล์ถูกเลือกหรือไม่

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

ฉันชอบตัวอย่างนี้:

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

คุณใช้ประเภทอินพุต = "ไฟล์" เพื่อเลือกไฟล์อัพโหลดหรือไม่ ถ้าเป็นเช่นนั้นทำไมไม่ใช้คุณสมบัติยอมรับ

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

หากคุณต้องการทดสอบ URL ระยะไกลในช่องป้อนข้อมูลคุณสามารถลองทดสอบนิพจน์ทั่วไปกับประเภทที่คุณสนใจได้

$input_field = $('.js-input-field-class');

if ( !(/\.(gif|jpg|jpeg|tiff|png)$/i).test( $input_field.val() )) {
  $('.error-message').text('This URL is not a valid image type. Please use a url with the known image types gif, jpg, jpeg, tiff or png.');
  return false;
}

สิ่งนี้จะบันทึกทุกสิ่งที่ลงท้ายด้วย . gif, .jpg, .jpeg, .tiff หรือ. png

ฉันควรทราบว่าไซต์ยอดนิยมบางแห่งเช่น Twitter ต่อท้ายแอตทริบิวต์ขนาดไว้ที่ส่วนท้ายของรูปภาพ ตัวอย่างเช่นสิ่งต่อไปนี้จะทำให้การทดสอบนี้ล้มเหลวแม้ว่าจะเป็นประเภทภาพที่ถูกต้อง:

https://pbs.twimg.com/media/BrTuXT5CUAAtkZM.jpg:large

ด้วยเหตุนี้จึงไม่ใช่วิธีแก้ปัญหาที่สมบูรณ์แบบ แต่จะนำคุณไปสู่ประมาณ 90% ของเส้นทาง

ลองสิ่งนี้ (ใช้ได้กับฉัน)

  
  function validate(){
  var file= form.file.value;
       var reg = /(.*?)\.(jpg|bmp|jpeg|png)$/;
       if(!file.match(reg))
       {
    	   alert("Invalid File");
    	   return false;
       }
       }

<form name="form">
<input type="file" name="file"/>
<input type="submit" onClick="return validate();"/>
</form>

     

อีกตัวอย่างในปัจจุบันผ่านArray.prototype.some ()

function isImage(icon) {
  const ext = ['.jpg', '.jpeg', '.bmp', '.gif', '.png', '.svg'];
  return ext.some(el => icon.endsWith(el));
}

console.log(isImage('questions_4234589.png'));
console.log(isImage('questions_4234589.doc'));

นี่คือวิธีที่ใช้ซ้ำได้มากขึ้นโดยสมมติว่าคุณใช้ jQuery

ฟังก์ชั่นไลบรารี (ไม่ต้องใช้ jQuery):

function stringEndsWithValidExtension(stringToCheck, acceptableExtensionsArray, required) {
    if (required == false && stringToCheck.length == 0) { return true; }
    for (var i = 0; i < acceptableExtensionsArray.length; i++) {
        if (stringToCheck.toLowerCase().endsWith(acceptableExtensionsArray[i].toLowerCase())) { return true; }
    }
    return false;
}


String.prototype.startsWith = function (str) { return (this.match("^" + str) == str) }

String.prototype.endsWith = function (str) { return (this.match(str + "$") == str) }

ฟังก์ชันเพจ (ต้องใช้ jQuery (แทบจะไม่)):

$("[id*='btnSaveForm']").click(function () {
    if (!stringEndsWithValidExtension($("[id*='fileUploader']").val(), [".png", ".jpeg", ".jpg", ".bmp"], false)) {
        alert("Photo only allows file types of PNG, JPG and BMP.");
        return false;
    }
    return true;
});

[TypeScript]

uploadFileAcceptFormats: string[] = ['image/jpeg', 'image/gif', 'image/png', 'image/svg+xml'];

// if you find the element type in the allowed types array, then read the file
isAccepted = this.uploadFileAcceptFormats.find(val => {
    return val === uploadedFileType;
});

คุณสามารถใช้ acceptแอตทริบิวต์ที่มีให้สำหรับประเภทไฟล์อินพุต ชำระเงินเอกสาร MDN

นี่คือวิธีการทำใน jquery

$("#artifact_form").submit(function(){
    return ["jpg", "jpeg", "bmp", "gif", "png"].includes(/[^.]+$/.exec($("#artifact_file_name").val())[0])
  });

เมื่อคุณต้องการตรวจสอบปุ่มเรียกดูและนามสกุลไฟล์ให้ใช้รหัสนี้:

function fileValidate(){ 
var docVal=document.forms[0].fileUploaded.value;
var extension = docVal.substring(docVal.lastIndexOf(".")+1,docVal.length);
if(extension.toLowerCase() != 'pdf')
alert("Please enter file  in .pdf extension ");

return false;
}

ฉันคิดว่าลองด้วย mimetype ดีกว่าตรวจสอบส่วนขยาย เนื่องจากบางครั้งไฟล์อาจมีอยู่โดยไม่มีมันและไฟล์เหล่านั้นทำงานได้ดีในระบบ linux และ unix

ดังนั้นคุณสามารถลองสิ่งนี้:

["image/jpeg", "image/png", "image/gif"].indexOf(file.type) > -1

<script type="text/javascript">

        function file_upload() {
            var imgpath = document.getElementById("<%=FileUpload1.ClientID %>").value;
            if (imgpath == "") {
                alert("Upload your Photo...");
                document.file.word.focus();
                return false;
            }
            else {
                // code to get File Extension..

                var arr1 = new Array;
                arr1 = imgpath.split("\\");
                var len = arr1.length;
                var img1 = arr1[len - 1];
                var filext = img1.substring(img1.lastIndexOf(".") + 1);
                // Checking Extension
                if (filext == "bmp" || filext == "gif" || filext == "png" || filext == "jpg" || filext == "jpeg" ) {
                    alert("Successfully Uploaded...")
                    return false;
                }
                else {
                    alert("Upload Photo with Extension ' bmp , gif, png , jpg , jpeg '");
                    document.form.word.focus();
                    return false;
                }
            }
        }

        function Doc_upload() {
            var imgpath = document.getElementById("<%=FileUpload2.ClientID %>").value;
            if (imgpath == "") {
                alert("Upload Agreement...");
                document.file.word.focus();
                return false;
            }
            else {
                // code to get File Extension..

                var arr1 = new Array;
                arr1 = imgpath.split("\\");
                var len = arr1.length;
                var img1 = arr1[len - 1];
                var filext = img1.substring(img1.lastIndexOf(".") + 1);
                // Checking Extension
                if (filext == "txt" || filext == "pdf" || filext == "doc") {
                    alert("Successfully Uploaded...")
                    return false;
                }
                else {
                    alert("Upload File with Extension ' txt , pdf , doc '");
                    document.form.word.focus();
                    return false;
                }
            }
        }
</script>

คุณสามารถสร้างอาร์เรย์ที่มีประเภทไฟล์ที่ต้องการและใช้ $ .inArray () ใน jQuery เพื่อตรวจสอบว่าประเภทไฟล์มีอยู่ในอาร์เรย์หรือไม่

var imageType = ['jpeg', 'jpg', 'png', 'gif', 'bmp'];  

// Given that file is a file object and file.type is string 
// like "image/jpeg", "image/png", or "image/gif" and so on...

if (-1 == $.inArray(file.type.split('/')[1], imageType)) {
  console.log('Not an image type');
}

เราสามารถตรวจสอบได้เมื่อส่งหรือเราสามารถเปลี่ยนแปลงเหตุการณ์ของการควบคุมนั้นได้

var fileInput = document.getElementById('file');
    var filePath = fileInput.value;
    var allowedExtensions = /(\.jpeg|\.JPEG|\.gif|\.GIF|\.png|\.PNG)$/;
    if (filePath != "" && !allowedExtensions.exec(filePath)) {
    alert('Invalid file extention pleasse select another file');
    fileInput.value = '';
    return false;
    }

นี่เป็นทางออกที่ดีที่สุดในความคิดของฉันซึ่งสั้นกว่าวิธีอื่นมาก:

function OnSelect(e) {
    var acceptedFiles = [".jpg", ".jpeg", ".png", ".gif"];
    var isAcceptedImageFormat = ($.inArray(e.files[0].extension, acceptedFiles)) != -1;

    if (!isAcceptedImageFormat) {
        $('#warningMessage').show();
    }
    else {
        $('#warningMessage').hide();
    }
}

ในกรณีนี้ฟังก์ชันนี้เรียกใช้จากตัวควบคุม Kendo Upload ด้วยการตั้งค่านี้:

.Events(e => e.Select("OnSelect")).