webloader上傳圖片詳細教程/使用thinkphp5.0（原創）

時間 2019-11-30

標籤 webloader 上傳圖片詳細教程使用 thinkphp5.0 thinkphp 原創欄目 PHP 简体版

原文原文鏈接

這個插件對後端程序員至關友好，不管是JAVA仍是PHP，抑或python,基本只須要一句代碼就能完成上傳而且預覽的效果，先上效果圖，讓大家眼饞一下javascript

廢話不說，直接擼代碼，前端代碼以下：php

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="/new/public/static/webuploader.css"><!-- 引用插件css -->
    </head>
<body>

<div id="uploader-demo">
    <!--用來存放item-->
        <div id="fileList" class="uploader-list">
        </div>
    <div id="filePicker">選擇圖片</div>
</div>
</body>
<script type="text/javascript" src="/new/public/static/jquery-3.1.1.js"></script>  <!-- 引用jquery -->  
<script type="text/javascript" src="/new/public/static/webuploader.js"></script>    <!-- 引用插件js -->


<script type="text/javascript">
           var $list=$("#fileList");   //這幾個初始化全局的百度文檔上沒說明，好蛋疼
           var thumbnailWidth = 100;   //縮略圖高度和寬度 （單位是像素），當寬高度是0~1的時候，是按照百分比計算，具體能夠看api文檔  
           var thumbnailHeight = 100;  
           var uploader = WebUploader.create({
            // 選完文件後，是否自動上傳。
           auto: true,
            // swf文件路徑
           swf: '/new/public/static/uploader.swf', //加載swf文件，路徑必定要對

            // 文件接收服務端。
            server: '{:url("index/index/upload")}',

            // 選擇文件的按鈕。可選。
            // 內部根據當前運行是建立，多是input元素，也多是flash.
            pick: '#filePicker',

            // 只容許選擇圖片文件。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/'
            }
        });
      //上傳完成事件監聽
        uploader.on( 'fileQueued', function(file) {
            var $li = $(
                    '<div id="' + file.id + '" class="file-item thumbnail">' +
                        '<img>' +
                        '<div class="info">' + file.name + '</div>' +
                    '</div>'
                    ),
                $img = $li.find('img');
            // $list爲容器jQuery實例
                   $list.append( $li );
            // 建立縮略圖
            // 若是爲非圖片文件，能夠不用調用此方法。
            // thumbnailWidth x thumbnailHeight 爲 100 x 100
            uploader.makeThumb( file, function( error, src ) {
                if ( error ) {
                    $img.replaceWith('<span>不能預覽</span>');
                    return;
                }
                $img.attr( 'src', src );
            }, thumbnailWidth, thumbnailHeight );
        });
</script>
</html>

後端代碼：css

由於我是用的thinkphp5.0.7框架寫的，裏面封裝了file類，就是完成文件的轉移上傳：html

<?php
namespace app\index\controller;

use think\Controller;
use think\File;

class Index  extends Controller
{
    public function index()
    {
         return $this->fetch();
    }
    function upload(){
        $file = $this->request->file('file');//file是傳文件的名稱，這是webloader插件固定寫入的。由於webloader插件會寫入一個隱藏input，不信大家能夠經過瀏覽器檢查頁面
        $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
    }
}