laravel调用webuploader插件

简要描述：

laravel结合webuploader上传文件插件

引入css和js：

<link rel="stylesheet" type="text/css" href="{{ URL::asset('css/webuploader.css') }}">
<script type="text/javascript" src="https://cdn.staticfile.org/webuploader/0.1.0/webuploader.min.js"></script>

view层：

html

<div id="uploader-demo">
  <div id="fileList" class="uploader-list"></div>
  <div id="filePicker">选择图片</div>
</div>
<div id="show_img" style="display:none;">
  <img id="thumb_img" src="" alt="图片" height="100px">
</div>

<script>
    var $list = $("#fileList");   //这几个初始化全局的百度文档上没说明，好蛋疼
    var thumbnailWidth = 100;   //缩略图高度和宽度 （单位是像素），当宽高度是0~1的时候，是按照百分比计算，具体可以看api文档
    var thumbnailHeight = 100;
    var uploader = WebUploader.create({
        // 选完文件后，是否自动上传。
        auto: true,
        formData: {
            // 这里的token是外部生成的长期有效的，如果把token写死，是可以上传的。
            _token:'{{ csrf_token() }}'
        },
        // swf文件路径
        swf: 'http://cdn.staticfile.org/webuploader/0.1.0/Uploader.swf', //加载swf文件，路径一定要对
        // 文件接收服务端。
        server: '{{ url('upload/uploadimg') }}',
        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: {
            id : '#filePicker',
            multiple : false
        },
        // 只允许选择图片文件。
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/'
        }
    });
    // 文件上传过程中创建进度条实时显示。
    uploader.on( 'uploadProgress', function( file, percentage ) {
        var $li = $( '#'+file.id ),$percent = $li.find('.progress span');

        // 避免重复创建
        if ( !$percent.length ) {
            $percent = $('<p class="progress"><span></span></p>').appendTo( $li ).find('span');
        }

        $percent.css( 'width', percentage * 100 + '%' );
    });

    // 文件上传成功，给item添加成功class, 用样式标记上传成功。
    uploader.on( 'uploadSuccess', function(file,response) {
        var imgurl = response.url;
        $('#thumb_img').attr('src',imgurl);

        $('#show_img').css('display','block');

        $( '#'+file.id ).addClass('upload-state-done');
    });

    // 文件上传失败，显示上传出错。
    uploader.on( 'uploadError', function(file,response) {
        var fileerror = response.error;

        var $li = $( '#'+file.id ),$error = $li.find('div.error');

        // 避免重复创建
        if ( !$error.length ) {
            $error = $('<div class="error"></div>').appendTo( $li );
        }

        $error.text('上传失败'+fileerror);
    });

    // 完成上传完了，成功或者失败，先删除进度条。
    uploader.on( 'uploadComplete', function( file ) {
        $( '#'+file.id ).find('.progress').remove();
    });
</script>

controller层：

<?php

namespace App\Http\Controllers\Index;

use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Facades\Input;
use Illuminate\Http\Request;

class uploadController extends Controller
{
    public function __construct()
    {
    }

    public function uploadimg(Request $request)
    {
        // 设置超时时间为没有限制
        ini_set("max_execution_time", "0");

        $http_type = ((isset($_SERVER['HTTPS'])&&$_SERVER['HTTPS'] == 'on') || (isset($_SERVER['HTTP_X_FORWARDED_PROTO']) && $_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https')) ? 'https://' : 'http://';

        $file = $request->file('file');

        $allowed_extensions = ["png", "jpg", "gif", "jpeg", "bmp"];
        if ($file->getClientOriginalExtension() && !in_array($file->getClientOriginalExtension(), $allowed_extensions)) {
            return json_encode(['error' => 'You may only upload png, jpg or gif or jpeg or bmp.']);
        }

        $destinationPath = 'storage/uploads/'.date('Ymd').'/'; //public 文件夹下面建 storage/uploads 文件夹
        $extension = $file->getClientOriginalExtension();
        $fileName = md5(microtime(true)).'.'.$extension;
        $file->move($destinationPath, $fileName);

        return json_encode(['type' => $extension , 'url' => $http_type.$_SERVER['HTTP_HOST'].'/'.$destinationPath.'/'.$fileName , 'name' => $fileName]);
    }
}

最后编辑于：2018.03.05 15:58:00