paramètres du fichier jquery

Dans le développement Web, nous devons souvent permettre aux utilisateurs de télécharger des fichiers, et le plug-in jQuery File Upload est un outil très pratique et pratique qui nous permet d'implémenter facilement la fonction de téléchargement de fichiers. Cet article explique comment utiliser le plug-in jQuery File Upload pour configurer la fonction de téléchargement de fichiers.

1. Présenter les fichiers jQuery

Avant d'utiliser le plug-in jQuery File Upload, nous devons d'abord introduire le fichier jQuery pour garantir que le plug-in peut fonctionner correctement. Vous pouvez introduire des fichiers jQuery dans des documents HTML via le code suivant :

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

2. Téléchargez et introduisez le plug-in jQuery File Upload

Téléchargez d'abord le code source du plug-in depuis le site officiel, puis introduisez ce qui suit fichiers dans le document HTML :

<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 , Paramètres du document HTML

Définissez les documents HTML et créez un formulaire de téléchargement de fichiers, par exemple :

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

Remarque : Ce formulaire contient une zone de saisie du type de fichier et un bouton de soumission.

4. Paramètres du code jQuery

Une fois les paramètres ci-dessus terminés, nous devons utiliser les codes liés à jQuery pour les paramètres. Tout d'abord, vous pouvez initialiser le plug-in via le code suivant :

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

Dans ce code, nous précisons la méthode fileupload à démarrer sur le formulaire. L'option dataType indique au plug-in que le serveur répondra avec des données au format JSON, et la fonction done est la fonction de rappel une fois le fichier téléchargé avec succès.

Il convient de noter que le code ci-dessus ne limite pas les types de fichiers téléchargés. Si vous devez limiter les types de fichiers téléchargés, vous pouvez ajouter les options suivantes lors de l'initialisation du code :

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

Il existe d'autres options couramment utilisées qui peuvent être définies, telles que :

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

Dans le code ci-dessus, nous pouvons également définissez maxFileSize avec Pour limiter la taille maximale des fichiers téléchargés, maxNumberOfFiles pour limiter le nombre maximum de fichiers téléchargés, le paramètre dropZone prend en charge le téléchargement par glisser-déposer, autoUpload est utilisé pour définir s'il faut activer le téléchargement automatique, etc.

Enfin, nous pouvons également ajouter une barre de progression et annuler la fonction de téléchargement, par exemple :

$(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');
    });
});

Dans le code ci-dessus, nous utilisons progressall pour ajouter la fonction de barre de progression de téléchargement, utilisons Cancel pour ajouter la fonction d'annulation de téléchargement, puis mettre à jour et annuler la barre de progression Liez l'événement correspondant au bouton de téléchargement.

5. Résumé

Grâce aux paramètres ci-dessus, nous avons utilisé avec succès le plug-in jQuery File Upload pour implémenter la fonction de téléchargement de fichiers. En plus de définir des options telles que le type de fichier, la taille du fichier et la quantité de téléchargement, nous pouvons également ajouter des barres de progression et annuler les fonctions de téléchargement pour rendre le téléchargement de fichiers plus pratique pour les utilisateurs. Le plug-in jQuery File Upload est un outil très pratique qui peut grandement simplifier le travail de développement. Si vous avez besoin d'utiliser la fonction de téléchargement de fichiers, vous souhaiterez peut-être en apprendre davantage.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!