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

撸完搞定，开森ING--------- 前端

thinkphp官网也有我本人写的文章，欢迎收藏。 http://www.thinkphp.cn/topic/46521.html java