All geek questions in one place

Javascript validation to insert a file of a specific name

I want to check in Javascript, that the file name should be of a certain type, should be loaded, as in the example.

I have a file system control that has a function to load a multipe file.

here is the html of this.

<asp:FileUpload runat="server" ID="flufileUpload" AllowMultiple="true" onchange="return ValidateFileType(this);" />

So when I download, I want the user to upload a file of a specific name

as: -

User can upload only 5 files with name only

1 -> 120.jpg

2 -> 150.jpg

3 -> 180.jpg

4 -> 210.jpg

5 -> 240.jpg

if the user uploads a file name other than this, then he should request a warning.

my function for handling some validations is given below. but I cannot handle file name verification.

function ValidateFileType(controlName) {
    try {
        var uploadControl = controlName;
        var isCValidFile = false;

        for (var i = 0; i < uploadControl.files.length; i++) {
            isCValidFile = false;

            var path = uploadControl.files[i].name;
            var ext = path.substring(path.lastIndexOf(".") + 1, path.length).toLowerCase();

            if (path != "") {
                for (var j = 0; j < ValidImageFileExtension.length; j++) {
                    if (ext == ValidImageFileExtension[j]) {
                        isCValidFile = true;
                        break;
                    }
                }
                if (!isCValidFile) {
                    jAlert("Invalid File. Please upload a File with extension " + ValidImageFileExtension.join(", "), "Information");
                    uploadControl.value = '';
                    isCValidFile = false;
                    break;
                }
                else if (uploadControl.files[i].size > 15728640) {
                    jAlert("Please check file size should be less than 15 MB.", "Information");
                    uploadControl.value = '';
                    isCValidFile = false;
                    break;
                }
            }
            else {
                jAlert("Please select File", "Information");
                isCValidFile = false;
                break;
            }
        }

        return isCValidFile;

    } catch (e) {
        isCValidFile = false;
        jAlert("Error occurred on validate file.", "Error");
        return isCValidFile;
    }
}
+4
4

, , .

var Tabtype = document.getElementById('hdnType').value; 

if (Tabtype == "Panaromic") { 
    var validFileName = { 
         "120.jpg": 1, "150.jpg": 1, "180.jpg": 1, "210.jpg": 1, "240.jpg": 1, 
    } 
} 

if (Tabtype == "Satellite") { 
    var validFileName = { 
          "55.jpg": 1, "74.jpg": 1, "83.jpg": 1, "935.jpg": 1, 
    } 
} 

if (Tabtype == "SitePlot") { 
    var validFileName = 0; 
}


if (path != "") {
   if(validFileName && !isFileNameValid(path)){
       jAlert("Invalid File. Please upload a File with extension " + 
       ValidImageFileExtension.join(", "), "Information");
       uploadControl.value = '';
       isCValidFile = false;
       break;
   }
   ...
+3

. jQuery, jQuery.

jQuery, . , , HTML. .

JQuery Validation:

$(document).ready(function() {
  $.validator.addMethod("filecount", function(value, element, params) {
    var maxcount = params;
    if (maxcount) {
      return $(element)[0].files.length <= Number(maxcount);
    }
    return true;
  }, "Maximum number of files exceeded");

  $.validator.addMethod("filename", function(value, element, params) {

    if (!params) return true;
    var names = params.split(',');
    var files = $(element)[0].files;
    for (var i = 0; i < files.length; i++) {
      var file = files[i];
      if (names.indexOf(file.name.toLowerCase()) == -1) return false;
    }
    return true;

  }, "File name is not allowed");

  var mb = 1048576;
  var defaultmaxfilesize = mb * 15;

  $.validator.addMethod("filesize", function(value, element, params) {
    var el = $(element);
    var parsedmaxval = parseInt(el.attr("data-val-filesize-max"));
    var maxval = null;
    if (isNaN(parsedmaxval) || parsedmaxval < 1 || parsedmaxval > 1048576000) {
      maxval = defaultmaxfilesize;
    } else {

      maxval = parsedmaxval;
    }

    var files = el[0].files;
    if (files != null && files.length > 0) {
      for (var i = 0; i < files.length; i++) {
        var file = files[i];
        var size = file.size;
        if (maxval < Number(size)) return false;
      }
    }
    return true;

  }, "File is too large");
});
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>



  <script>
    $(document).ready(function() {

      $('input[type="file"]').change(function() {

        var el = $(this);

        if (!el.valid()) el.val('');
      });
    });
  </script>
</head>

<body>
  <form id="form1" name="form1" action="/root" method="Post">
    <div>
      <input type=file 
          ID="flufileUpload" 
          multiple 
          data-msg-filename="File name must be '120.jpg, 150.jpg, 180.jpg, 210.jpg, or 240.jpg'" 
          data-rule-filename="120.jpg,150.jpg,180.jpg,210.jpg,240.jpg" 
          data-msg-filesize="Maximum File Size is 15 MB" 
          data-rule-filesize="15728640"
          data-msg-filecount="You can only upload 5 files" 
          data-rule-filecount="5" />


    </div>
    <div>
      <input type=file 
          ID="flufileUpload2" 
          name="flufileUpload2" 
          multiple 
          data-msg-filename="File name must be '480.jpg, 640.jpg, or 1024.jpg'" 
          data-rule-filename="480.jpg,640.jpg,1024.jpg" 
          data-msg-filesize="Maximum File Size is 10 MB" 
          data-rule-filesize="10485760"
          data-msg-filecount="You can only upload 5 files" 
          data-rule-filecount="5" />
    </div>
  </form>
</body>

</html>
Hide result

MVC jQuery Unobtrusive Validation, api, :

$.validator.unobtrusive.adapters.add("filecount", ["filecount"], function (options) {
    options.rules["filecount"] = "#" + options.params.param;
    options.messages["filecount"] = options.message;
});

$.validator.addMethod("filecount", function (value, element, params) {

    var maxcount = $(element).attr("data-val-filecount-max");
    if (maxcount) {
        return $(element)[0].files.length <= Number(maxcount);
    }
    return true;

});
$.validator.unobtrusive.adapters.add("filenames", ["filename"], function (options) {
    options.rules["filename"] = "#" + options.params.param;
    options.messages["filename"] = options.message;
});

$.validator.addMethod("filename", function (value, element, params) {

    var names = $(element).attr("data-val-filename-allowed").split(',');
    var files = $(element)[0].files;
    for (var i = 0; i < files.length; i++) {
        var file = files[i];
        if (names.indexOf(file.name.toLowerCase()) == -1) return false;
    }
    return true;

});

var mb = 1048576;
var defaultmaxfilesize = mb * 15;

$.validator.unobtrusive.adapters.add("filesize", ["filesize"], function (options) {
    options.rules["filesize"] = "#" + options.params.param;
    options.messages["filesize"] = options.message;
});

$.validator.addMethod("filesize", function (value, element, params) {
    var el = $(element);
    var parsedmaxval = parseInt(el.attr("data-val-filesize-max"));
    var maxval = null;
    if (isNaN(parsedmaxval) || parsedmaxval < 1 || parsedmaxval > 1048576000) {
        maxval = defaultmaxfilesize;
    } else {

        maxval = parsedmaxval;
    }

    var files = el[0].files;
    if (files != null && files.length > 0) {
        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            var size = file.size;
            if (maxval < size) return false;
        }
    }
    return true;


});

:

<input 
    type=file 
    ID="flufileUpload" 
    multiple data-val-filename="File name must be '120.jpg, 150.jpg, 180.jpg, 210.jpg, or 240.jpg'" 
    data-val-filename-allowed="120.jpg,150.jpg,180.jpg,210.jpg,240.jpg"
    data-val-filesize="Maximum File Size is 15 MB"
    data-val-filesize-max="15728640"
    data-val-filecount="You can only upload 5 files"
    data-val-filecount-max="5"
/>

- :

<input 
    type=file 
    ID="flufileUpload" 
    multiple data-val-filename="File name must be '480.jpg, 640.jpg, or 1024.jpg'" 
    data-val-filename-allowed="480.jpg,640.jpg,1024.jpg"
    data-val-filesize="Maximum File Size is 10 MB"
    data-val-filesize-max="10485760"
/>

, , jQuery. , , . , , AJAX .

, :

 <script>
        $(document).ready(function () {
            $('#flufileUpload').fileValidate({ maxcount: 5, allowedFileNames: "file1.html,file2.html,file3.html" });
        });
    </script>

, , , JavaScript , :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #qrcode {
            width: 160px;
            height: 160px;
            margin-top: 15px;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        (function ($) {
            $.fn.fileValidate = function (options) {
                var Container = $(this);
                var id = Container.attr("id");
                var mb = 1048576;
                var settings = $.extend({
                    maxfilesize: mb * 15,
                    allowMultiple: true,
                    allowedFileNames: null,
                    allowedExtensions: ".png,.gif,tif,.tiff,.jpg,.jpeg,.bmp,.pdf",
                    maxcount: -1,
                    documentRemoveCallback: null,
                    target: null,
                    errlab: null
                }, options);

                var getErrorLabel = function () {
                    var validator = $('span[data-val-msgfor="' + id + "']");
                    if (validator.length == 0) {
                        validator = $("<span/>");
                        validator.attr("data-val-msgfor", id);
                        Container.parent().append(validator);
                    }
                    return validator;
                }
                var formatBytes = function formatBytes(bytes, decimals) {
                    if (bytes == 0) return '0 Bytes';
                    var k = 1024,
                        dm = decimals + 1 || 3,
                        sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
                        i = Math.floor(Math.log(bytes) / Math.log(k));
                    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
                };
                var validExtensions = (settings.allowedExtensions) ? settings.allowedExtensions.split(",") : [];
                var validFileNames = (settings.allowedFileNames) ? settings.allowedFileNames.split(",") : [];
                var errlab = settings.errlab || getErrorLabel();
                var hasError = false;
                var errors = [];
                var setError = function (s) {
                    errors.push(s);

                }
                var getErrorHtml = function () {
                    var ul = $("<ul>");
                    errors.forEach(function (err) { ul.append($("<li>").html(err)); });
                    return ul;
                }
                var validateSize = function (files) {
                    for (var i = 0; i < files.length; i++) {
                        if (files[i].size > settings.maxfilesize) return false;
                    }
                    return true;
                }
                var validateExenstions = function (files) {
                    var invalid = [];
                    for (var i = 0; i < files.length; i++) {
                        var file = files[i];
                        var parts = file.name.split(".");
                        var ext = parts[parts.length - 1].toLowerCase();
                        var found = false;
                        validExtensions.forEach(function (x) {
                            if (x == ext) found = true;
                        });
                        !found && invalid.indexOf(ext) == -1 && invalid.push(ext);
                        if (!found) return false;
                    }
                    return true;

                }
                var validateFileNames = function (files) {
                    for (var i = 0; i < files.length; i++) {
                        var file = files[i];
                        if (validFileNames.indexOf(file.name) == -1) return false;
                    }
                    return true;
                }
                var onDocumentChange = function () {
                    errors = [];
                    var el = Container[0];
                    errlab.html('');
                    var files = el.files;

                    settings.maxcount > 0 && files.length > settings.maxcount && setError("You may only select " + settings.maxcount + " file(s).");
                    validExtensions.length > 0 && !validateExenstions(files) && setError("File extensions must be '" + settings.allowedExtensions + "'.");
                    settings.maxfilesize > 0 && !validateSize(files) && setError("Maximum file size is " + formatBytes(settings.maxfilesize) + ".");
                    validFileNames.length > 0 && !validateFileNames(files) && setError("Files names must be one of the following: '" + settings.allowedFileNames + "'.");
                    errors.length > 0 && $(Container).val(''), errlab.html('').append(getErrorHtml());
                    if (settings.documentChangeCallBack) { window.setTimeout(settings.documentChangeCallBack, 1); }
                };
                Container.change(onDocumentChange);
            };
        }(jQuery));
    </script>
</head>
<body>




    <input type=file ID="flufileUpload" multiple />
    <script>
      
    </script>
    <script>
        $(document).ready(function () {
            $('#flufileUpload').fileValidate({ maxcount: 5, allowedFileNames: "file1.html,file2.html,file3.html" });
        });
    </script>

</body>
</html>
Hide result
+2

html. , , .

<!DOCTYPE html>
    <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <title></title>
    </head>
    <body>  
      <label for="file">Filename:</label>
        <input type="file" name="filename" id="filename" onchange="ValidateFileType();" multiple="multiple"/> 
    </body>


<script>
function ValidateFileType() {

var ext_names = ["jpg", "png", "jpeg"];

    try {
        var uploadControl = document.getElementById('filename');
        var isCValidFile = false;

        for (var i = 0; i < uploadControl.files.length; i++) {
            isCValidFile = false;
            var path = uploadControl.files[i].name;
            var ext = path.substring(path.lastIndexOf(".") + 1, path.length).toLowerCase();
            alert(path);
            if (path != "") {

            alert(ext);
                    if (ext_names.indexOf(ext) > -1) {
                        isCValidFile = true;    
                       // break;
                    }

                if (!isCValidFile) {
                    alert("Invalid File. Please upload a File with extension " + ext_names.join(", "), "Information");
                    uploadControl.value = '';
                    isCValidFile = false;
                    break;
                }
                else if (uploadControl.files[i].size > 15728640) {
                    alert("Please check file size should be less than 15 MB.", "Information");
                    uploadControl.value = '';
                    isCValidFile = false;
                    break;
                }
            }
            else {
                alert("Please select File", "Information");
                isCValidFile = false;
                break;
            }
        }

        return isCValidFile;

    } catch (e) {
        isCValidFile = false;
        alert("Error occurred on validate file.", "Error");
        return isCValidFile;
    }
}
</script>


    </html>

...

+1

, . . , , , .

function ValidateFileType(controlName) {
  try {
       var uploadControl = controlName;
       var isCValidFile = false;
       var validFileNames = ["120.jpg","150.jpg","180.jpg","210.jpg","240.jpg"]

       for (var i = 0; i < uploadControl.files.length; i++) {
           var file = uploadControl.files[i];
           var fileName = file.name.split(/(\\|\/)/g).pop().toLowerCase();
           if (validFileNames.indexOf(fileName) < 0) {
              jAlert("Invalid file name, please select etc...",  "Information");
           }
           else if (file.size > 15728640) {
                   jAlert("Please check file size should be less than 15 MB.",  "Information");
           }
           else {
               isCValidFile = true;
           }

           if(!isCValidFile)
               uploadControl.value = '';
       }

       return isCValidFile;

   } catch (e) {
       uploadControl.value = '';
       jAlert("Error occurred on validate file.", "Error");
       return false;
   }
}
+1

Source: https://habr.com/ru/post/1680953/

More articles:


All Articles