So verwenden Sie das jQuery-Plug-in, um die Größe und das Format hochgeladener Dateien zu begrenzen

Dieses Mal erkläre ich Ihnen, wie Sie mit dem jQuery-Plug-in die Größe und das Format hochgeladener Dateien begrenzen. Welche Vorsichtsmaßnahmen gibt es, wie das jQuery-Plug-in die Größe und das Format von Dateien begrenzt? Hochgeladene Dateien Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Beim Hochladen von Dateien auf den Client ist es normalerweise notwendig, die Größe und das Format der Datei zu begrenzen. Die häufigste Methode ist die Verwendung eines bestimmten Plug-Ins leistungsstarke Funktionen, aber der einzige Nachteil ist: Manchmal können 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.

(function ($) {
    $.fn.checkFileTypeAndSize = function (options) {
        //默认设置
        var defaults = {
            allowedExtensions: [],
            maxSize: 1024, //单位是KB，默认最大文件尺寸1MB=1024KB
            success: function () { },
            extensionerror: function () { },
            sizeerror: function () { }
        };
        //合并设置
        options = $.extend(defaults, options);
        //遍历元素
        return this.each(function () {
            $(this).on('change', function () {
                //获取文件路径
                var filePath = $(this).val();
                //小写字母的文件路径
                var fileLowerPath = filePath.toLowerCase();
                //获取文件的后缀名
                var extension = fileLowerPath.substring(fileLowerPath.lastIndexOf('.') + 1);
                //判断后缀名是否包含在预先设置的、所允许的后缀名数组中
                if ($.inArray(extension, options.allowedExtensions) == -1) {
                    options.extensionerror();
                    $(this).focus();
                } else {
                    try {
                        var size = 0;
                        if ($.browser.msie) {//ie旧版浏览器
                            var fileMgr = new ActiveXObject("Scripting.FileSystemObject");
                            var fileObj = fileMgr.getFile(filePath);
                            size = fileObj.size; //byte
                            size = size / 1024;//kb
                            //size = size / 1024;//mb
                        } else {//其它浏览器
                            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("错误：" + e);
                    }
                }
            });
        });
    };
})(jQuery);

Der Anruf beim Kunden wird sehr einfach.

<input type="file" name="f" id="f"/>
@section scripts
{
    <script src="~/Scripts/checkFileTypeAndSize.js"></script>
    <script type="text/
javascript
">
        $(function() {
            $(&#39;#f&#39;).checkFileTypeAndSize({
                allowedExtensions: [&#39;jpg&#39;],
                maxSize: 10,
                success: function() {
                    alert(&#39;ok&#39;);
                },
                extensionerror: function() {
                    alert(&#39;允许的格式为：jpg&#39;);
                    return;
                },
                sizeerror: function() {
                    alert(&#39;最大尺寸10kb&#39;);
                    return;
                }
            });
        });
    </script>
}

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung von jQuery, um Browsern zu ermöglichen, zueinander zu springen und Parameter zu übergeben

Ausführliche Erklärung zur Verwendung des JQuery-Plug-Ins uploadify

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das jQuery-Plug-in, um die Größe und das Format hochgeladener Dateien zu begrenzen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!