[PHP知识库]web 图片上传

?html

<div class="formControls col-xs-8 col-sm-9">
    <div id="uploader-demo">
        <!--用来存放item-->
        <div id="fileList"  class="uploader-list"></div>
        <div id="filePicker">选择图片</div>
        <input type="text" id="hiddle" name="hidden">
    </div>
</div>

?引入

<script src="http://cdn.staticfile.org/webuploader/0.1.0/webuploader.js"></script>

?web上传js代码

//web 上传
var uploader = WebUploader.create({

    // 选完文件后，是否自动上传。
    auto: true,
    swf: 'http://cdn.staticfile.org/webuploader/0.1.0/Uploader.swf',
    // swf文件路径
    method:"post",
    // 文件接收服务端。
    server: "{{route('updated')}}",
    formData:{
        _token:'{{csrf_token()}}'
    },
    fileVal:'file',


    // 选择文件的按钮。可选。
    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
    pick: '#filePicker',

    // 只允许选择图片文件。
    resize:true
});
// 文件上传成功，给item添加成功class, 用样式标记上传成功。
uploader.on( 'uploadSuccess', function( file ,ret) {
    $("#hiddle").val(ret.msg);
    var $li = $(
        '<div id="' + file.id + '" class="file-item thumbnail">' +
        '<img>' +
        '<div class="info">' + file.name + '</div>' +
        '</div>'
        ),
        $img = $li.find('img');


    // $list为容器jQuery实例
    $("#fileList").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 );
    } );
});

?后台代码数据

<?php

namespace App\Http\Controllers;

use App\Exports\UsersExport;
use Illuminate\Http\Request;
use App\Http\Requests;
use App\Http\Controllers\Controller;
use Maatwebsite\Excel\Facades\Excel;

class ExcelController extends Controller
{
    //Excel文件导出功能 By Laravel学院
    public function export()
    {
        //导出方法
        return Excel::download(new UsersExport, '2.xlsx');
    }
}