Rumah pembangunan bahagian belakang tutorial php 如何使用php和layui一起实现图片的上传与预览的代码

如何使用php和layui一起实现图片的上传与预览的代码

Jul 27, 2018 am 10:39 AM

这篇文章给大家介绍的文章内容是关于如何使用php和layui一起实现图片的上传与预览的代码,有很好的参考价值,希望可以帮助到有需要的朋友。

端代码:

<!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>
Salin selepas log masuk

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);
    }
Salin selepas log masuk

 

相关推荐:

php如何实现等比例压缩图片的代码

php编码在excel文件中是如何转换的?php编码转换的使用方法

Atas ialah kandungan terperinci 如何使用php和layui一起实现图片的上传与预览的代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bekerja dengan Data Sesi Flash di Laravel Bekerja dengan Data Sesi Flash di Laravel Mar 12, 2025 pm 05:08 PM

Laravel memudahkan mengendalikan data sesi sementara menggunakan kaedah flash intuitifnya. Ini sesuai untuk memaparkan mesej ringkas, makluman, atau pemberitahuan dalam permohonan anda. Data hanya berterusan untuk permintaan seterusnya secara lalai: $ permintaan-

Bina aplikasi React dengan hujung belakang Laravel: Bahagian 2, React Bina aplikasi React dengan hujung belakang Laravel: Bahagian 2, React Mar 04, 2025 am 09:33 AM

Ini adalah bahagian kedua dan terakhir siri untuk membina aplikasi React dengan back-end Laravel. Di bahagian pertama siri ini, kami mencipta API RESTful menggunakan Laravel untuk aplikasi penyenaraian produk asas. Dalam tutorial ini, kita akan menjadi dev

Curl dalam PHP: Cara Menggunakan Pelanjutan PHP Curl dalam API REST Curl dalam PHP: Cara Menggunakan Pelanjutan PHP Curl dalam API REST Mar 14, 2025 am 11:42 AM

Pelanjutan URL Pelanggan PHP (CURL) adalah alat yang berkuasa untuk pemaju, membolehkan interaksi lancar dengan pelayan jauh dan API rehat. Dengan memanfaatkan libcurl, perpustakaan pemindahan fail multi-protokol yang dihormati, php curl memudahkan execu yang cekap

Respons HTTP yang dipermudahkan dalam ujian Laravel Respons HTTP yang dipermudahkan dalam ujian Laravel Mar 12, 2025 pm 05:09 PM

Laravel menyediakan sintaks simulasi respons HTTP ringkas, memudahkan ujian interaksi HTTP. Pendekatan ini dengan ketara mengurangkan redundansi kod semasa membuat simulasi ujian anda lebih intuitif. Pelaksanaan asas menyediakan pelbagai jenis pintasan jenis tindak balas: Gunakan Illuminate \ Support \ Facades \ http; Http :: palsu ([ 'Google.com' => 'Hello World', 'github.com' => ['foo' => 'bar'], 'forge.laravel.com' =>

12 skrip sembang php terbaik di codecanyon 12 skrip sembang php terbaik di codecanyon Mar 13, 2025 pm 12:08 PM

Adakah anda ingin memberikan penyelesaian segera, segera kepada masalah yang paling mendesak pelanggan anda? Sembang langsung membolehkan anda mempunyai perbualan masa nyata dengan pelanggan dan menyelesaikan masalah mereka dengan serta-merta. Ia membolehkan anda memberikan perkhidmatan yang lebih pantas kepada adat anda

Pemberitahuan di Laravel Pemberitahuan di Laravel Mar 04, 2025 am 09:22 AM

Dalam artikel ini, kami akan meneroka sistem pemberitahuan dalam rangka kerja web Laravel. Sistem pemberitahuan di Laravel membolehkan anda menghantar pemberitahuan kepada pengguna melalui saluran yang berbeza. Hari ini, kami akan membincangkan bagaimana anda boleh menghantar pemberitahuan ov

Terangkan konsep pengikatan statik lewat dalam PHP. Terangkan konsep pengikatan statik lewat dalam PHP. Mar 21, 2025 pm 01:33 PM

Artikel membincangkan pengikatan statik lewat (LSB) dalam PHP, yang diperkenalkan dalam Php 5.3, yang membolehkan resolusi runtime kaedah statik memerlukan lebih banyak warisan yang fleksibel. Isu: LSB vs polimorfisme tradisional; Aplikasi Praktikal LSB dan Potensi Perfo

Pembalakan PHP: Amalan Terbaik untuk Analisis Log PHP Pembalakan PHP: Amalan Terbaik untuk Analisis Log PHP Mar 10, 2025 pm 02:32 PM

Pembalakan PHP adalah penting untuk memantau dan menyahpepijat aplikasi web, serta menangkap peristiwa kritikal, kesilapan, dan tingkah laku runtime. Ia memberikan pandangan yang berharga dalam prestasi sistem, membantu mengenal pasti isu -isu, dan menyokong penyelesaian masalah yang lebih cepat

See all articles