webuploads文件上传导出带图片

2024-04-08 21:10:58

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <!--引入CSS-->
    <link rel="stylesheet" type="text/css" href="/webuploader/webuploader.css">

    <!--引入JS-->
    <script type="text/javascript" src="/webuploader/webuploader.js"></script>

    <!--SWF在初始化的时候指定，在后面将展示-->
</head>
<body>

<div class="container">
    <form action="{:url('save')}" method="post">
        <div id="uploader" class="wu-example">
            <!--用来存放文件信息-->
            <div id="thelist" class="uploader-list"></div>
            <div class="btns">
                <div id="picker">选择文件</div>
                <input type="hidden" name="pic" id="pic">
                <img src="" id="img" style="width: 300px;display: none" height="200px" >
            </div>
            <button type="submit" class="btn btn-primary">添加图片</button>
        </div>
    </form>

    <h2></h2>
    <button type="button" class="btn btn-primary"><a href="{:url('excelPhoto')}" style="color: white">导出excel</a></button>
    <table class="table">
        <thead>
        <tr>
            <th>ID</th>
            <th>标题</th>
            <th>封面</th>
        </tr>
        </thead>
        <tbody>
        {volist name="data" id="vo"}
        <tr>
            <td>{$vo.id}</td>
            <td>{$vo.title}</td>
            <td>
                <img src="{$vo.pic}" width="200" height="100">
            </td>
        </tr>
        {/volist}
        </tbody>
    </table>
</div>

</body>
</html>

<script>
    var uploader = WebUploader.create({
        // 选完文件后，是否自动上传。
        auto: true,
        // swf文件路径
        swf: '/js/Uploader.swf',
        // 文件接收服务端。
        server: "{:url('uploader')}",
        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#picker',
        fileVal:"pic",
        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        resize: false
    });
    uploader.on( 'uploadSuccess', function( file ,res) {
        console.log(res)
        let src=res.path
        $("#pic").val(src)
        $("#img").attr("src",src).show()
    });

</script>

   public function index()
    {
        $data=\app\test\model\Essay::select();
        return view("index",compact("data"));
    }

    //导出图片
    public function excelPhoto()
    {
        $res = Db::table('essay')->select();
        $resultPHPExcel = new \PHPExcel();
        //设置参数
        //设值
        $resultPHPExcel->getActiveSheet()->setCellValue('A1', 'id');
        $resultPHPExcel->getActiveSheet()->setCellValue('B1', '名称');
        $resultPHPExcel->getActiveSheet()->setCellValue('C1', '图片');
        $i = 2;
        foreach ($res as $item) {
            $resultPHPExcel->getActiveSheet()->setCellValue('A' . $i, $item['id']);
            $resultPHPExcel->getActiveSheet()->setCellValue('B' . $i, $item['title']);
            $objDrawing = new \PHPExcel_Worksheet_Drawing();
            $objDrawing->setPath('.' . $item['pic']);//这里拼接 . 是因为要在根目录下获取
            // 设置宽度高度
            $objDrawing->setHeight(50);//照片高度
            $objDrawing->setWidth(50); //照片宽度
            /*设置图片要插入的单元格*/
            $objDrawing->setCoordinates('C' . $i);
            // 图片偏移距离
            $objDrawing->setOffsetX(0);
            $objDrawing->setOffsetY(0);
            $objDrawing->setWorksheet($resultPHPExcel->getActiveSheet());
            $i++;
        }
        //设置导出文件名

        $outputFileName = 'total.xls';

        $xlsWriter = new \PHPExcel_Writer_Excel5($resultPHPExcel);

        ob_end_clean();
        header("Content-Type: application/force-download");

        header("Content-Type: application/octet-stream");

        header("Content-Type: application/download");

        header('Content-Disposition:inline;filename="' . $outputFileName . '"');

        header("Content-Transfer-Encoding: binary");

        header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");

        header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");

        header("Cache-Control: must-revalidate, post-check=0, pre-check=0");

        header("Pragma: no-cache");

        $xlsWriter->save("php://output");
    }
    
    public function uploader(){
        // 获取表单上传文件 例如上传了001.jpg
        $file = request()->file('pic');
        // 移动到框架应用根目录/public/uploads/ 目录下
        if($file){
            $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
            if($info){
                $filepath = '/uploads/'. $info->getSaveName();
                // 输出 20160820/42a79759f284b767dfcb2a0197904287.jpg
                return json(['code'=>200,'msg'=>'success','path'=>$filepath]);
            }else{
                // 上传失败获取错误信息
                echo $file->getError();
            }
        }

    }
    //添加
    public function save(Request $request)
    {
        dump($request->param());
        $param=$request->only("pic");
        $data=\app\test\model\Essay::create($param);
        if ($data){
            $this->success("添加成功","index");
        }else{
            $this->error("系统繁忙");
        }
    }

码农公寓

相关文章