Comment utiliser PHP et Layui pour implémenter le téléchargement d'images et le code de prévisualisation

不言
Libérer: 2023-04-03 13:18:02
original
4196 Les gens l'ont consulté

Cet article vous présente le code sur la façon d'utiliser PHP et layui pour télécharger et prévisualiser des images. Il a une bonne valeur de référence et j'espère qu'il pourra aider les amis dans le besoin.

Code de fin :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>upload模块快速使用</title>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
</head>
<body>
    
    <button type="button" class="layui-btn" id="test1">
      <i class="layui-icon">&#xe67c;</i>上传图片
    </button>
    <div class="layui-upload-list">
        <img class="layui-upload-img" width="100px" height="100px" id="demo1">
        <p id="demoText"></p>
    </div>

    <script src="/layui/layui.js"></script>
    <script>

        layui.use(&#39;upload&#39;, function(){
            var $ = layui.jquery
            ,layer = layui.layer
            ,upload = layui.upload;

            var uploadInst = upload.render({
                elem:&#39;#test1&#39;
                ,url:&#39;/index/upload/upload&#39;
                ,accept:&#39;file&#39;  // 允许上传的文件类型
                ,auto:true // 自动上传
                ,before:function (obj) {
                    // console.log(obj);
                    // 预览
                    obj.preview(function(index,file,result) {
                        // console.log(file.name);    //图片地址
                        // console.log(file.type);    //图片格式
                        // console.log(file.size);    //图片大小
                        // console.log(file);    //图片地址
                        $(&#39;#demo1&#39;).attr(&#39;src&#39;,result); //图片链接 base64
                    });
                }
                // 上传成功回调
                ,done:function(res) {
                    // console.log(upload);
                    console.log(res);
                    if (res.code == 0) {
                        layer.msg(res.msg);
                    }else{
                        layer.msg(res.msg);
                    }
                }
                // 上传失败回调
                ,error:function(index,upload) {
                    // 上传失败
                }
            });

        })
    </script>
</body>
</html>
Copier après la connexion

backend php :

public function upload()
    {
        
        $file = request()->file(&#39;file&#39;);
        $info = $file->move(ROOT_PATH . &#39;public&#39; . DS . &#39;uploads&#39;);
        if($info) {
            $data[&#39;code&#39;] = 0;
            $data[&#39;msg&#39;] = $info->getSaveName();
        }else{
            $data[&#39;code&#39;] = 1;
            $data[&#39;msg&#39;] = $file->getError();
        }
            return json($data);
    }
Copier après la connexion

Recommandations associées :

code php pour savoir comment compresser des images dans des proportions égales

codage php dans excel Comment est-il converti dans le fichier ? Comment utiliser la conversion d'encodage php

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!