Beispiel für ein jQuery-Plug-in, das die Größe und das Format der hochgeladenen Dateien begrenzt_jquery

Das Beispiel in diesem Artikel beschreibt das jQuery-Plug-in, das die Größe und das Format hochgeladener Dateien begrenzt. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Beim Hochladen von Dateien auf den Client ist es normalerweise erforderlich, die Größe und das Format der Datei zu begrenzen. Die häufigste Methode ist die Verwendung eines bestimmten Plug-Ins. Einige ausgereifte Plug-Ins verfügen über schöne Schnittstellen und leistungsstarke Funktionen. Der einzige Nachteil ist jedoch, dass manchmal Probleme mit der Browserkompatibilität auftreten. In diesem Artikel schreiben wir ein „originales“ jQuery-Plug-in, das die Größe und das Format hochgeladener Dateien begrenzen kann.

Schreiben Sie zunächst ein Plug-In mit dem Namen checkFileTypeAndSize.js. Begrenzen Sie das Dateiformat, indem Sie beurteilen, ob der Suffixname der aktuellen Datei in dem von der Voreinstellung zugelassenen Suffixnamen-Array enthalten ist, indem Sie beurteilen, ob die Größe der aktuellen Datei unter IE und anderen Browsern größer als die von der Voreinstellung zulässige maximale Dateigröße ist voreingestellt, um die Dateigröße zu begrenzen und Rückruffunktionen für Formatfehler, Überschreitung der Grenzgröße und Erfüllung von Bedingungen bereitzustellen.

Code kopieren Der Code lautet wie folgt:

(Funktion ($) {
$.fn.checkFileTypeAndSize = Funktion (Optionen) {
//Standardeinstellungen
      var defaults = {
              erlaubte Erweiterungen: [],
                 maxSize: 1024, // Die Einheit ist KB, die standardmäßige maximale Dateigröße beträgt 1 MB = 1024 KB
Erfolg: function () { },
              extensionerror: function () { },
sizeerror: function () { }
        };
//Einstellungen zusammenführen
Optionen = $.extend(Standards, Optionen);
//Elemente durchqueren
          return this.each(function () {
                 $(this).on('change', function () {
//Dateipfad abrufen
              var filePath = $(this).val();
//Dateipfad in Kleinbuchstaben
              var fileLowerPath = filePath.toLowerCase();
//Erhalte den Suffixnamen der Datei
            var extension = fileLowerPath.substring(fileLowerPath.lastIndexOf('.') 1);
//Bestimmen Sie, ob der Suffixname im voreingestellten und zulässigen Suffixnamen-Array enthalten ist
If ($.inArray(extension, options.allowedExtensions) == -1) {
options.extensionerror();
                            $(this).focus();
                     } sonst {
                     versuchen Sie es mit {
                        var size = 0;
Wenn ($.browser.msie) {//dh alte Browserversion
                                                         var fileMgr = new ActiveXObject("Scripting.FileSystemObject");
                                                                                  var fileObj = fileMgr.getFile(filePath);
size = fileObj.size; //byte
size = size / 1024;//kb
//size = size / 1024;//mb
                                  } else {//Andere Browser
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) {
alarm("Fehler: "e);
                 }
                }
            });
        });
};
})(jQuery);

Der Anruf beim Kunden wird sehr einfach.

Code kopieren Der Code lautet wie folgt:<input type="file" name="f" id= „f“ />

@section-Skripte

{
<script src="~/Scripts/checkFileTypeAndSize.js"></script>
<script type="text/javascript">
          $(function() {
                 $('#f').checkFileTypeAndSize({
                                                                                                                                                                                                                                         erlaubte Erweiterungen: ['jpg'],
                    maxSize: 10,
Erfolg: function() {
alarm('ok');
                 },
Erweiterungsfehler: function() {
warning('Erlaubtes Format ist: jpg');
                    zurück;
                 },
sizeerror: function() {
warning('Maximale Größe 10 KB');
                    zurück;
                }
            });
        });
</script>
}

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.