tp5 多文件上传（图片+音频）增删改查

增

控制器

public function add()
{

    if (request()->isPost()) {
        // dump($_POST); die;
        $data = [
            'title' => input('title'),
            'author' => input('author'),
            'time' => time(),
        ];




        if ($_FILES['pic']['tmp_name']) {
            $filepic = request()->file('pic');
            $info = $filepic->move(ROOT_PATH . 'public' . DS . 'uploads');
            $data['pic'] = 'public/uploads/' . $info->getSaveName();
        }



        if ($_FILES['music']['tmp_name']) {
            $filemusic = request()->file('music');
            $info = $filemusic->move(ROOT_PATH . 'public' . DS . 'uploads');
            $data['music'] = 'public/uploads/' . $info->getSaveName();
        }



        if (db('Music')->insert($data)) {
            return $this->success('添加音乐成功！', 'lst');
        } else {
            return $this->error('添加音乐失败！');
        }
        return;
    }

    $cateres = db('cate')->select();
    $this->assign('cateres', $cateres);
    return $this->fetch();
}

视图

<form class="form-horizontal" role="form" action="" enctype="multipart/form-data" method="post">
    <div class="form-group">
        <label
               class="col-sm-2 control-label no-padding-right">音乐标题</label>
        <div class="col-sm-6">
            <input class="form-control" placeholder="" name="title"
                    type="text">
        </div>
    </div>
    <div class="form-group">
        <label
                class="col-sm-2 control-label no-padding-right">音乐作者</label>
        <div class="col-sm-6">
            <input class="form-control" placeholder="" name="author"
                   type="text">
        </div>
    </div>


    <div class="form-group">
        <label
               class="col-sm-2 control-label no-padding-right">歌手缩略图</label>
        <div class="col-sm-6">
            <input class="form-control" name="pic"
                   type="file">
        </div>
    </div>


    <div class="form-group">
        <label
                class="col-sm-2 control-label no-padding-right">音频</label>
        <div class="col-sm-6">
            <input class="form-control" name="music"  id="test" type="file">
            <audio id="audio" controls autoplay="" style="display: none; "></audio>

        </div>
    </div>

   <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">保存信息</button>
        </div>
    </div>
</form>

<script>
    //录音上传
    $(function () {
        $("#test").change(function () {
            var objUrl = getObjectURL(this.files[0]);
            $("#audio").attr("src", objUrl);
            $("#audio")[0].pause();
            $("#audio").show();
            $("#mp3_submit").show()
            getTime();

        });
    });
    <!--获取mp3文件的时间 兼容浏览器-->
    function getTime() {
        setTimeout(function () {
            var duration = $("#audio")[0].duration;
            if(isNaN(duration)){
                getTime();
            }
            else{
                console.info("该歌曲的总时间为："+$("#audio")[0].duration+"秒")
            }
        }, 10);
    }
    <!--把文件转换成可读URL-->
    function getObjectURL(file) {
        var url = null;
        if (window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;

    }
</script>

删

控制器

public function del()
{

    $id = input('id');


    $result = db('Music')->where('id', $id)->delete();
    if ($result) {
        return $this->success('删除音乐成功');
    } else {
        return $this->error('删除音乐失败', url('lst'));
    }


}

视图

<a href="#" onClick="warning('确实要删除吗', '{:url('music/del',array('id'=>$vo['id']))}')"
   class="btn btn-danger btn-sm shiny">
    <i class="fa fa-trash-o"></i> 删除
</a>

改

控制器

public function edit()
{
    $id = input('id');
    $musics = db('Music')->find($id);

    $this->assign('musics', $musics);


    if (request()->isPost()) {
        $data = [
            'id' => input('id'),
            'title' => input('title'),
            'author' => input('author'),

        ];

        if ($_FILES['pic']['tmp_name']) {

            $file = request()->file('pic');
            $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
            $data['pic'] = 'public/uploads/' . $info->getSaveName();
        }


        if ($_FILES['music']['tmp_name']) {
            $filemusic = request()->file('music');
            $info = $filemusic->move(ROOT_PATH . 'public' . DS . 'uploads');
            $data['music'] = 'public/uploads/' . $info->getSaveName();
        }




        if (db('Music')->update($data)) {
            $this->success('修改音乐成功！', 'lst');
        } else {
            $this->error('修改音乐失败！');
        }
        return;
    }


    $cateres = db('cate')->select();
    $this->assign('cateres', $cateres);
    return $this->fetch();
}

视图

<form class="form-horizontal" role="form" action="" enctype="multipart/form-data" method="post">
    <input type="hidden" name="id" value="{$musics.id}">
    <div class="form-group">
        <label
                class="col-sm-2 control-label no-padding-right">音乐名字</label>
        <div class="col-sm-6">
            <input class="form-control" placeholder="" name="title"
                   type="text" value="{$musics.title}">
        </div>
    </div>

    <div class="form-group">
        <label
                class="col-sm-2 control-label no-padding-right">音乐作者</label>
        <div class="col-sm-6">
            <input class="form-control" placeholder="" name="author"
                   type="text" value="{$musics.author}">
        </div>
    </div>


    <div class="form-group">
        <label
                class="col-sm-2 control-label no-padding-right">专辑缩略图</label>
        <div class="col-sm-6">
            <input id="pic" placeholder="" name="pic" style="display:inline;" type="file">
            {if condition="$musics['pic'] neq ''"}
            <img src="/{$musics.pic}" height="30" >
            {else /}
            <span>暂无缩略图</span>
            {/if}
        </div>
    </div>


    <div class="form-group">
        <label
                class="col-sm-2 control-label no-padding-right">专辑缩略图</label>
        <div class="col-sm-6">
            <input  placeholder="" name="music" style="display:inline;" type="file">
            {if condition="$musics['music'] neq ''"}
            <audio controls src="/{$musics.music}" height="30" ></audio>
            {else /}
            <span>暂无音频</span>
            {/if}
        </div>
    </div>


    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">保存信息</button>
        </div>
    </div>
</form>

<script>
    //录音上传
    $(function () {
        $("#test").change(function () {
            var objUrl = getObjectURL(this.files[0]);
            $("#audio").attr("src", objUrl);
            $("#audio")[0].pause();
            $("#audio").show();
            $("#mp3_submit").show()
            getTime();

        });
    });
    <!--获取mp3文件的时间 兼容浏览器-->
    function getTime() {
        setTimeout(function () {
            var duration = $("#audio")[0].duration;
            if(isNaN(duration)){
                getTime();
            }
            else{
                console.info("该歌曲的总时间为："+$("#audio")[0].duration+"秒")
            }
        }, 10);
    }
    <!--把文件转换成可读URL-->
    function getObjectURL(file) {
        var url = null;
        if (window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;

    }
</script>

查

控制器

public function lst()
{

    /*$list = ArticleModel::paginate(3);*/
    $list = MusicModel::name('music')->order('id', 'desc')->paginate(3);

    $this->assign('list', $list);

    return $this->fetch();
}

视图

<div class="flip-scroll">
    <table class="table table-bordered table-hover">
        <thead class="">
        <tr>
            <th class="text-center">ID</th>
            <th class="text-center">音乐名字</th>
            <th class="text-center">音乐作者</th>
            <th class="text-center">音频</th>
            <th class="text-center">歌手缩略图<s/th>
            <th class="text-center">操作</th>
        </tr>
        </thead>
        <tbody>
        {volist name="list" id="vo"}
        <tr>
            <td align="center">{$vo.id}</td>
            <td align="center">{$vo.title}</td>
            <td align="center">{$vo.author}</td>



            <td align="center">
                {if condition="$vo['pic'] neq '' "}
                <img src="/{$vo.pic}" height="50">
                {else /}
                暂无缩略图
                {/if}
            </td>


            <td align="center">
                {if condition="$vo['music'] neq '' "}
                <audio controls src="/{$vo.music}" height="50"></audio>
                {else /}
                暂无音频
                {/if}
            </td>



            <td align="center">
                <a href="{:url('music/edit',array('id'=>$vo['id']))}"
                   class="btn btn-primary btn-sm shiny">
                    <i class="fa fa-edit"></i> 编辑
                </a>
                <a href="#" onClick="warning('确实要删除吗', '{:url('music/del',array('id'=>$vo['id']))}')"
                   class="btn btn-danger btn-sm shiny">
                    <i class="fa fa-trash-o"></i> 删除
                </a>
            </td>
        </tr>
        {/volist}

        </tbody>
    </table>
</div>
<div>
    {$list->render()}
</div>