Example of jQuery plug-in that limits the size and format of uploaded files_jquery

The example in this article describes the jQuery plug-in that limits the size and format of uploaded files. Share it with everyone for your reference. The specific analysis is as follows:

When uploading files on the client, it is usually necessary to limit the size and format of the file. The most common method is to use a certain plug-in. Some mature plug-ins do have beautiful interfaces and powerful functions, but the only drawback is: sometimes you encounter Browser compatibility issues. In this article, we will write an "original" jQuery plug-in that can limit the size and format of uploaded files.

First, write a plug-in named checkFileTypeAndSize.js. Limit the file format by judging whether the suffix name of the current file is included in the suffix name array allowed by the preset; by judging whether the size of the current file under IE and other browsers is greater than the maximum file size allowed by the preset, to limit the file size; and provide callback functions for format errors, exceeding the limit size, and meeting conditions.

Copy code The code is as follows:

(function ($) {
$.fn.checkFileTypeAndSize = function (options) {
//Default settings
      var defaults = {
              allowedExtensions: [],
                 maxSize: 1024, //The unit is KB, the default maximum file size is 1MB=1024KB
Success: function () { },
              extensionerror: function () { },
sizeerror: function () { }
        };
//Merge settings
options = $.extend(defaults, options);
//Traverse elements
          return this.each(function () {
                 $(this).on('change', function () {
//Get file path
              var filePath = $(this).val();
//File path in lower case letters
              var fileLowerPath = filePath.toLowerCase();
//Get the suffix name of the file
            var extension = fileLowerPath.substring(fileLowerPath.lastIndexOf('.') 1);
//Determine whether the suffix name is included in the preset and allowed suffix name array
If ($.inArray(extension, options.allowedExtensions) == -1) {
options.extensionerror();
                            $(this).focus();
                     } else {
                     try {
                        var size = 0;
If ($.browser.msie) {//ie old version of browser
                                                           var fileMgr = new ActiveXObject("Scripting.FileSystemObject");
                                                                                     var fileObj = fileMgr.getFile(filePath);
size = fileObj.size; //byte
size = size / 1024;//kb
//size = size / 1024;//mb
                                  } else {//Other browsers
size = $(this)[0].files[0].size;//byte
size = size / 1024;//kb
//size = size / 1024;//mb
                                                                                                       } If (size > options.maxSize) {
options.sizeerror();
                            } else {
options.success();
                                                                                                       }                                  } catch (e) {
alert("Error: "e);
                 }
                }
            });
        });
};
})(jQuery);

Calling on the client becomes very simple.

Copy code The code is as follows:

@section scripts

{


}

I hope this article will be helpful to everyone’s jQuery programming.