Téléchargement par lots d'images php+WebUploader-tutoriel php-php.cn

Téléchargement par lots d'images php+WebUploader

1. webuploader

webuploader est principalement utilisé pour télécharger des fichiers, prend en charge le téléchargement par lots et l'aperçu des images, l'aperçu des images. consiste à générer des données base64 à partir de l'image et à les utiliser directement dans la balise Téléchargement par lots d'images php+WebUploader , de sorte que l'effet qui peut être obtenu est que vous pouvez voir l'effet du téléchargement de l'image avant de la télécharger réellement. Pour une introduction plus détaillée, vous pouvez consulter le site officiel de webuploader. Je pense toujours que la lecture des documents du site officiel est le moyen le plus direct d'apprendre. site officiel de webuploader, d'ailleurs, webuploader est maintenu par l'équipe Baidu Fex.

2. Principe de téléchargement de Webuploader

1. Fichier de téléchargement de formulaire PHP+HTML

Avant de parler de cela, vous devez comprendre la méthode de téléchargement de fichiers de PHP. téléchargements. Partie

créez d'abord le formulaire <form> via HTML, ajoutez la balise de téléchargement de fichier de

<input type=&#39;file&#39; name=&#39;xxx&#39;>

Copier après la connexion

dans le formulaire, puis cliquez sur le bouton de soumission de téléchargement, vous pouvez télécharger le fichier sur le serveur.

Lorsqu'il atteint le serveur, le fichier téléchargé reçu sera stocké dans le dossier temporaire spécifié par PHP. À l'aide de la fonction intégrée de PHP move_uploaded_file(), vous pouvez déplacer le fichier temporaire vers. votre Dans le dossier de destination souhaité, ce processus peut renommer le fichier, déterminer sa taille et déterminer s'il remplit les conditions. De cette manière, le téléchargement est terminé.

Pour un cas complet de téléchargement de formulaire PHP, vous pouvez lire cet article de w3school, je n'entrerai donc pas dans les détails ici. Fichier de téléchargement de formulaire PHP+HTML

2. Principe de téléchargement de Webuploader

L'utilisation du téléchargement de formulaire php+html peut terminer le travail de téléchargement de fichier, mais elle présente des inconvénients,

Lors du téléchargement d'un fichier, vous devez soumettre la page entière, la page sera donc actualisée
Il n'y a aucun moyen de prévisualiser l'image lors du téléchargement , donc parfois la mauvaise image est téléchargée. Vous ne le saurez pas tant que vous n'aurez pas actualisé la page une fois l'image téléchargée.

Webuploader résout ces deux problèmes. Webuploader utilise la technologie ajax pour soumettre le formulaire. Il n'est pas nécessaire de soumettre la page lors du téléchargement. Vous pouvez utiliser le mécanisme d'écoute des événements pour surveiller les résultats du téléchargement. et prendre des décisions sur la page, et peut également faire un aperçu des images. L'utilisation de webuploader pour télécharger des images ne nécessite que quelques étapes :

La page HTML frontale configure webuploader
La page PHP du serveur d'arrière-plan accepte le téléchargement images de webuploader. Ensuite, traitez-le.
Après le traitement de l'image en arrière-plan, le résultat du retour des données json est envoyé à la réception
La réception reçoit le. json et donne des commentaires.

Une chose à noter ici est que l'arrière-plan PHP de réception et de traitement des images est fondamentalement le même que le téléchargement de formulaire PHP+HTML.

3. Configuration et utilisation de webuploader

Pour tous les paramètres de configuration et méthodes d'utilisation, vous pouvez consulter les documents officiels. Site officiel de webuploader, il existe quelques exemples de cas dans le référentiel github de webuploader pour référence. exemple

Mon environnement d'exécution : php5.6+nginx+macOS

Le répertoire de mon dossier

index .php
upload_img.php
mywebupload.js
webuploader/
téléchargements/

1. Le téléchargement Web de configuration de page HTML frontale

effectue principalement les étapes suivantes :

Présentez les packages js et css pertinents de webuploader
Créez des balises HTML
Créez un fichier js et initialisez webuploader Ce qui suit. est la page entière. Le code et le dossier webuploader ont été entièrement déplacés de github, puis j'ai également utilisé jquery pour améliorer l'expérience de la page.

index.html

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>WebUploader演示</title>
    <link rel="stylesheet" type="text/css" href="webuploader/css/webuploader.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" />
    <link rel="shortcut icon" href="favicon.ico">
</head>
<body>

    <div id="imgPicker">选择文件</div>
    <button class="btn btn-primary btn-upload">上传</button>
    <div></div>
    <div></div>
    
<!--jquery 1.12-->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!--bootstrap核心js文件-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<!--webuploader js-->
<!--<script type="text/javascript" src="static/jquery.js"></script>-->
<script type="text/javascript" src="webuploader/dist/webuploader.min.js"></script>
<script type="text/javascript" src="mywebupload.js"></script>
</body>
</html>

Copier après la connexion

mywebupload.js

$(function(){

    /*
     *   配置webuploader
     */

    var imgUploader = WebUploader.create({
        fileVal: 'img',  // 相当于input标签的name属性，用于后台PHP识别接收上传文件的field
        swf: './webuploader/dist/Uploader.swf',  // swf文件路径
        server: './upload_img.php',  // 文件接收服务端。
        fileNumLimit: 10,   // 上传文件的限制
        pick: {
            id : '#imgPicker',   // 
            multiple : true           // 是否支持多文件上传
        },
        //  只允许上传图片
        accept: {
            title: 'Only Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/jpg,image/jpeg,image/png,image/gif,image/bmp'
        },
        auto: false,    // 添加文件后是否自动上传上去，我设置了false，后面我会利用自己的上传按钮上传
        resize: false   // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
    });
    
    /*
     *   设置上传按钮的单击事件
     */
    $('.btn-upload').click(function(){
        imgUploader.upload();   // webuploader内置的upload函数，启动webuploader的上传    
    });
    
    /*
     *   配置webuploader的事件监听 
     */
    
    // 当图片文件被添加到上传队列中
    imgUploader.on('fileQueued', function (file) {
        addImgThumb(file);
    });
    
    // 生产图片预览
    function addImgThumb(file){
        imgUploader.makeThumb(file, function(error, ret){
            if(!error){
                img = '<img alt="" src="&#39; + ret + &#39;" />';
                $('.img-thumb').append(img);
            }else{
                console.log('making img error');
            }
        },1,1);
    }
    
    imgUploader.on('uploadSuccess'), function(file, response){
        // response 是后台upload_img.php返回的数据
        if(response.success){
            $('.result').append('<p>' + file.name + '上传成功</p>')
        }else{
            $('.result').append('<p>' + response.message + '</p>')
        }
    });
})

Copier après la connexion

2. La page PHP en arrière-plan traite les fichiers téléchargés

Il y en a deux. choses à noter ici Points :

Le nom du fichier php traité en arrière-plan doit être le même que lorsque le webuploader est configuré.
N'oubliez pas de définir les autorisations pour le dossier téléchargé. Linux peut utiliser chmod pour modifier les autorisations du dossier, sinon le téléchargement échouera.

Ma méthode de manipulation ici est relativement simple. Si vous avez des questions, n'hésitez pas à me laisser un message.

upload_img.php

<?php
    $field = &#39;img&#39;;   // 对应webupload里设置的fileVal
    
    $savePath = &#39;./uploads/&#39;;       // 这里注意设置uploads文件夹的权限
    $saveName = time() . uniqid() . &#39;_&#39; . $_FILES[$field][&#39;name&#39;]; //  为文件重命名
    $fullName = $savePath . $saveName;  
    
    if (file_exists($fullName)) {
        $result = [
            &#39;success&#39;=>false, 
            'message'=>'相同文件名的文件已经存在'
        ];
    }else{
        move_uploaded_file($_FILES[$field]["tmp_name"], $fullName);
        $result = ['success'=>true, 'fullName'=>$fullName];
    }
    
    return json_encode($result);  // 将结果打包成json格式返回
?>

Copier après la connexion

Ce qui précède est l'intégralité du contenu de webuploader. Pour plus de configuration des paramètres et d'événements de webuploader, veuillez vous référer au site officiel de webuploader. J'espère que vous laisserez plus de messages pour échanger des commentaires et des corrections.

Pour plus d'articles techniques liés à PHP, veuillez visiter la colonne Tutoriel PHP pour apprendre !

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!