ফাইল আপলোড করার আগে ফাইল এক্সটেনশনের বৈধতা

Question 1

আমি একটি সার্লেটে ছবি আপলোড করছি। আপলোড করা ফাইলটি কোনও চিত্র কিনা তা যাচাইকরণ কেবল ফাইলের শিরোনামে ম্যাজিক নম্বরগুলি পরীক্ষা করে সার্ভারের পাশেই করা হয়। সার্লেলে ফর্মটি জমা দেওয়ার আগে ক্লায়েন্ট পক্ষের এক্সটেনশানগুলিকে বৈধতা দেওয়ার কোনও উপায় আছে কি? প্রবেশের সাথে সাথেই এটি আপলোড করা শুরু করে।

আমি ক্লায়েন্ট সাইডে জাভাস্ক্রিপ্ট এবং jQuery ব্যবহার করছি।

আপডেট: পরিশেষে আমি সার্ভার সাইডের বৈধতা দিয়ে শেষ করেছিলাম যা বাইটগুলি পড়ে এবং আপলোডটি যদি এটি চিত্র না হয় তবে তা প্রত্যাখ্যান করে।

Question 2

কেবল ফাইল এক্সটেনশানটি পরীক্ষা করা সম্ভব, তবে ব্যবহারকারীরা সহজেই ভাইরাস.এক্সপি'র নাম পরিবর্তন করে ভাইরাস.জেপজি এবং বৈধতা "পাস" করতে পারেন।

যার মূল্য রয়েছে তার জন্য, ফাইল এক্সটেনশান চেক করার কোডটি এখানে রয়েছে এবং বৈধ এক্সটেনশনের কোনওটি পূরণ না করে তবে বাতিল করতে হবে: (অবৈধ ফাইলটি চয়ন করুন এবং সতর্কতাটি কার্যত দেখতে দেখতে জমা দেওয়ার চেষ্টা করুন)

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 দিয়ে করা যেতে পারে তবে আমি "কাঁচা" জাভাস্ক্রিপ্টের সাথে যথেষ্ট আরামদায়ক এবং চূড়ান্ত ফলাফলটি একই।

আপনার আরও ফাইল রয়েছে বা ফাইল পরিবর্তন করার পরে চেকটি ট্রিগার করতে চান এবং কেবল ফর্ম জমা দেওয়ার ক্ষেত্রে নয়, পরিবর্তে এই জাতীয় কোডটি ব্যবহার করুন:

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

স্নিপেট প্রসারিত করুন

এটি সতর্কতা প্রদর্শন করবে এবং অবৈধ ফাইল এক্সটেনশনের ক্ষেত্রে ইনপুটটিকে পুনরায় সেট করবে।

Question 3

অনুরোধের সরলতার জন্য বিদ্যমান উত্তরগুলির কোনওটিই যথেষ্ট কমপ্যাক্ট মনে হয়নি। কোনও সেট থেকে কোনও প্রদত্ত ফাইল ইনপুট ফিল্ডের একটি এক্সটেনশন রয়েছে কিনা তা পরীক্ষা করে নেওয়া যায়:

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 জন্য ডট সেখানে পালিয়ে যেতে যাতে মৌলিক এক্সটেনশন কোনো চরিত্র মিলে বিন্দু ছাড়া পাস করা যেতে পারে।

এগুলি সংক্ষিপ্ত রাখতে এগুলি পরীক্ষা করার ক্ষেত্রে কোনও ত্রুটি নেই, সম্ভবত আপনি যদি এটি ব্যবহার করেন তবে নিশ্চিত হয়ে নিন যে ইনপুটটি আগে উপস্থিত রয়েছে এবং এক্সটেনশানগুলি অ্যারেটি বৈধ কিনা!

Question 4

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

Question 5

আমি এখানে এসেছি কারণ আমি নিশ্চিত যে এখানে উত্তরগুলির কোনওটিই যথেষ্ট ... কাব্যিক নয়:

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

স্নিপেট প্রসারিত করুন

Question 6

ফাইল নির্বাচন করা হয়েছে কিনা তা পরীক্ষা করে দেখুন

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

Question 7

আমি এই উদাহরণটি পছন্দ করি:

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

Question 8

আপনি কি আপলোড ফাইলগুলি চয়ন করতে ইনপুট টাইপ = "ফাইল" ব্যবহার করেন? যদি তা হয় তবে গ্রহণযোগ্য বৈশিষ্ট্যটি ব্যবহার করবেন না কেন?

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

Question 9

যদি আপনাকে কোনও ইনপুট ক্ষেত্রে দূরবর্তী 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 এ শেষ হওয়া কোনও কিছুই ক্যাপচার করবে

আমার লক্ষ্য করা উচিত যে টুইটারের মতো কিছু জনপ্রিয় সাইটগুলি তাদের চিত্রগুলির শেষের জন্য একটি আকারের বৈশিষ্ট্য যুক্ত করে। উদাহরণস্বরূপ, এটি বৈধ চিত্রের ধরণের হলেও নিম্নলিখিতগুলি এই পরীক্ষায় ব্যর্থ হবে:

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

যে কারণে, এটি একটি নিখুঁত সমাধান নয়। তবে এটি আপনাকে প্রায় 90% পথে নিয়ে যাবে।

Question 10

এটি চেষ্টা করুন (আমার জন্য কাজ করে)

  
  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>

স্নিপেট প্রসারিত করুন

Question 11

আজকের আর একটি উদাহরণ অ্যারে.প্রোটোটাইপ.সোম () এর মাধ্যমে ।

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'));

স্নিপেট প্রসারিত করুন

Question 12

আপনি 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;
});

Question 13

[টাইপস্ক্রিপ্ট]

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

Question 14

আপনি acceptইনপুট ফাইলের ধরণের জন্য উপলব্ধ বৈশিষ্ট্যটি ব্যবহার করতে পারেন । চেকআউট MDN ডকুমেন্টেশন

Question 15

এটি jquery এ এটি করা হয়

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

Question 16

আপনি ব্রাউজ বোতাম এবং ফাইল এক্সটেনশান যাচাই করতে চান, এই কোডটি ব্যবহার করুন:

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

Question 17

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

Question 18

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

স্নিপেট প্রসারিত করুন

Question 19

আপনি এমন একটি অ্যারে তৈরি করতে পারেন যার মধ্যে প্রয়োজনীয় ফাইল টাইপ অন্তর্ভুক্ত রয়েছে এবং অ্যারের মধ্যে ফাইল টাইপ রয়েছে কিনা তা পরীক্ষা করতে jQuery এ in .inArray () ব্যবহার করুন।

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

Question 20

আমরা এটি জমা দেওয়ার সময়ে যাচাই করতে পারি বা আমরা সেই নিয়ন্ত্রণের পরিবর্তন অনুষ্ঠান করতে পারি

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

Question 21

এক্সটেনশন চেক করার চেয়ে মাইমটাইপ দিয়ে চেষ্টা করা ভাল বলে আমি মনে করি। কারণ, কখনও কখনও ফাইলগুলি এগুলি ছাড়া থাকতে পারে এবং এটি লিনাক্স এবং ইউনিক্স সিস্টেমে খুব ভালভাবে কাজ করছে।

সুতরাং, আপনি এই জাতীয় কিছু চেষ্টা করতে পারেন:

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

Question 22

এটি আমার মতে সেরা সমাধান, যা অন্যের চেয়ে অনেক কম সংক্ষেপে:

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

এই ক্ষেত্রে, ফাংশনটি এই সেটিং সহ কেন্দো আপলোড নিয়ন্ত্রণ থেকে কল করা হয়:

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