jquery-Dateieinstellungen

In der Webentwicklung müssen wir Benutzern häufig das Hochladen von Dateien ermöglichen. Das jQuery File Upload-Plug-in ist ein sehr praktisches und praktisches Tool, mit dem wir die Datei-Upload-Funktion einfach implementieren können. In diesem Artikel wird erläutert, wie Sie mit dem jQuery File Upload-Plug-in die Datei-Upload-Funktion einrichten.

1. jQuery-Dateien einführen

Bevor wir das jQuery-Datei-Upload-Plugin verwenden, müssen wir zuerst die jQuery-Datei einführen, um sicherzustellen, dass das Plug-in ordnungsgemäß ausgeführt werden kann. Mit dem folgenden Code können Sie jQuery-Dateien in HTML-Dokumente einführen:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

2. Laden Sie das jQuery File Upload-Plug-in herunter und führen Sie es ein.

Laden Sie zunächst den Quellcode des Plug-ins von der offiziellen Website herunter und führen Sie dann Folgendes ein Dateien in das HTML-Dokument einfügen:

<link href="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.22.0/css/jquery.fileupload.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.22.0/js/vendor/jquery.ui.widget.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.22.0/js/jquery.fileupload.min.js"></script>

3, HTML-Dokumenteinstellungen

Legen Sie HTML-Dokumente fest und erstellen Sie ein Datei-Upload-Formular, zum Beispiel:

<form id="fileupload" action="/upload" method="POST" enctype="multipart/form-data">
    <input type="file" name="files[]" multiple>
    <button type="submit">上传</button>
</form>

Hinweis: Dieses Formular enthält ein Dateityp-Eingabefeld und eine Senden-Schaltfläche.

4. jQuery-Codeeinstellungen

Nachdem die oben genannten Einstellungen abgeschlossen sind, müssen wir jQuery-bezogene Codes für die Einstellungen verwenden. Zuerst können Sie das Plug-in mit dem folgenden Code initialisieren:

$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        done: function (e, data) {
            // 上传完成后的回调函数
        }
    });
});

In diesem Code geben wir die Datei-Upload-Methode an, die im Formular gestartet werden soll. Die dataType-Option teilt dem Plug-in mit, dass der Server mit Daten im JSON-Format antwortet, und die erledigte Funktion ist die Rückruffunktion, nachdem die Datei erfolgreich hochgeladen wurde.

Es ist erwähnenswert, dass der obige Code die Art der hochgeladenen Dateien nicht einschränkt. Wenn Sie den Typ der hochgeladenen Dateien einschränken müssen, können Sie beim Initialisieren des Codes die folgenden Optionen hinzufügen:

$(function () {
    $('#fileupload').fileupload({
        // 允许上传的文件类型
        acceptFileTypes: /(.|/)(gif|jpe?g|png)$/i,
        ...
    });
});

Es gibt andere häufig verwendete Optionen, die festgelegt werden können, wie zum Beispiel:

$(function () {
    $('#fileupload').fileupload({
        // 允许上传的最大文件大小
        maxFileSize: 5000000, // 5 MB
        // 最大上传文件数量
        maxNumberOfFiles: 5,
        // 是否支持拖拽上传
        dropZone: $('#dropzone'),
        // 是否启用自动上传
        autoUpload: false,
        ...
    });
});

Im obigen Code können wir das auch Legen Sie maxFileSize fest, um die maximale Größe hochgeladener Dateien zu begrenzen, maxNumberOfFiles, um die maximale Anzahl hochgeladener Dateien zu begrenzen, die DropZone-Einstellung unterstützt das Hochladen per Drag & Drop, autoUpload wird verwendet, um festzulegen, ob das automatische Hochladen usw. aktiviert werden soll.

Schließlich können wir auch einen Fortschrittsbalken hinzufügen und die Upload-Funktion abbrechen, zum Beispiel:

$(function () {
    $('#fileupload').fileupload({
        ...
        // 上传进度事件处理函数
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .progress-bar').css(
                'width',
                progress + '%'
            );
        },
        
        // 取消上传
        cancel: function (e) {
            ...
        }
    });

    // 进度条更新
    $('#fileupload').on('fileuploadprogressall', function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#progress .progress-bar').css(
            'width',
            progress + '%'
        );
    });

    // 取消上传
    $('#fileupload .btn-danger').click(function () {
        $('#fileupload').fileupload('abort');
    });
});

Im obigen Code verwenden wir progressall, um die Upload-Fortschrittsbalkenfunktion hinzuzufügen, verwenden Sie cancel, um die Upload-Abbruchfunktion hinzuzufügen, und dann Aktualisieren und brechen Sie den Fortschrittsbalken ab. Binden Sie das entsprechende Ereignis an die Upload-Schaltfläche.

5. Zusammenfassung

Durch die oben genannten Einstellungen haben wir das jQuery-Datei-Upload-Plugin erfolgreich verwendet, um die Datei-Upload-Funktion zu implementieren. Zusätzlich zur Einstellung von Optionen wie Dateityp, Dateigröße und Upload-Menge können wir auch Fortschrittsbalken hinzufügen und Upload-Funktionen abbrechen, um das Hochladen von Dateien für Benutzer komfortabler zu gestalten. Das jQuery File Upload-Plugin ist ein sehr praktisches Tool, das die Entwicklungsarbeit erheblich vereinfachen kann. Wenn Sie die Datei-Upload-Funktion verwenden müssen, möchten Sie vielleicht mehr darüber erfahren.

Das obige ist der detaillierte Inhalt vonjquery-Dateieinstellungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!