fastadmin上传文件回调和实现自定义批量上传

最新推荐文章于 2024-06-15 10:11:50 发布

洋滔

最新推荐文章于 2024-06-15 10:11:50 发布

阅读量4.1k

点赞数

分类专栏： php 文章标签： javascript html php

本文链接：https://blog.csdn.net/a1004991278/article/details/128797955

版权

php 专栏收录该内容

6 篇文章 2 订阅

订阅专栏

文章目录

前言
一、上传回调
二、批量上传
- 总结

前言

Fastadmin是基于thinkphp5得一个快速开发开源框架，在市面上很流行，里边自定义了上传文件得方法，只需要简单调用即可使用，但是有时候我们需要对集成得功能进行修改以实现特定得需求。现在得需求是：各户的网站是一个知识付费下载资源网站，后台可以上传资源，客户要求上传资源后自动填充文件的名称和大小，以及可以批量上传资源，效果如同单个文件上传一样，可以自动填充资源的名称和大小。

一、上传回调

首先fastadmin上传使用的是系统自带的上传插件，一个简单的上传代码如下：

<div class="form-group">
    <label class="control-label col-xs-12 col-sm-2">{:__('File')}:</label>
    <div class="col-xs-12 col-sm-8">
        <div class="input-group">
            <input id="c-file" class="form-control" size="50" name="row[file]" type="text">
            <div class="input-group-addon no-border no-padding">
                <span><button type="button" id="plupload-file" class="btn btn-danger plupload" data-input-id="c-file" data-multiple="false" data-preview-id="p-file"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                <span><button type="button" id="fachoose-file" class="btn btn-primary fachoose" data-input-id="c-file" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
            </div>
            <span class="msg-box n-right" for="c-file"></span>
        </div>
        <ul class="row list-inline plupload-preview" id="p-file"></ul>
    </div>
</div>

根据客户的要求，我们可以在上传成功后对文件进行解析，然后把名称和大小返显到页面上，这里我们要知道上传成功后的回调方法：upload-success，使用方式如下：

$("#plupload-file").data("upload-success", function(btn,data, ret){
    //这里进行后续操作
});
Controller.api.bindevent();

其中第三个参数会返回上传文件的详细信息，我们拿到之后，就可以处理后显示到页面上了，这里具体的代码在文末。

二、批量上传

这里大概的效果是这样的，如下图：
在这里插入图片描述
要实现这样的效果，首先我们要自定义文件预览的模板，页面代码如下：

<div class="form-group">
    <label class="control-label col-xs-12 col-sm-2">{:__('文件')}:</label>
    <div class="col-xs-12 col-sm-8">
        <div class="input-group">
            <input id="c-files" data-rule="required" class="form-control" size="50" name="row[files]" type="text" value="">
            <div class="input-group-addon no-border no-padding">
                <span><button type="button" id="plupload-files" class="btn btn-danger plupload" data-input-id="c-files" data-mimetype="" data-multiple="true" data-preview-id="p-files"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                <span><button type="button" id="fachoose-files" class="btn btn-primary fachoose" data-input-id="c-files" data-mimetype="" data-multiple="true"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
            </div>
            <span class="msg-box n-right" for="c-files"></span>
        </div>

        <!--ul需要添加 data-template和data-name属性，并一一对应且唯一 -->
        <ul class="row list-inline plupload-preview" id="p-files" data-template="desctpl" data-name="row[desc]"></ul>

        <!--请注意 ul和textarea间不能存在其它任何元素，实际开发中textarea应该添加个hidden进行隐藏-->
        <textarea name="row[desc]" class="form-control hide" style="margin-top:5px;"></textarea>
        <!--这里自定义图片预览的模板 开始-->
        <script type="text/html" id="desctpl">
            <li class="col-xs-3">
                <a href="<%=fullurl%>" data-url="<%=url%>" target="_blank" class="thumbnail">
                    <img src="/ht/ajax/icon?suffix=file" class="img-responsive">
                </a>
                <input type="text" name="row[desc][<%=index%>][info]" class="form-control" placeholder="请输入插件描述" value="<%=value?value['info']:''%>"/>
                <input type="text" name="row[desc][<%=index%>][size]" class="form-control" placeholder="请输入插件大小" value="<%=value?value['size']:''%>"/>
                <a href="javascript:;" class="btn btn-danger btn-xs btn-trash"><i class="fa fa-trash"></i></a>
            </li>
        </script>
        <!--这里自定义图片预览的模板 结束-->
    </div>
</div>

写完页面代码后，我们要在js文件里处理批量上传的逻辑，整体的逻辑和单个文件上传的差不多，就是上传之后调用upload-success方法，首先定义两个变量，一个是文件名称names2，一个是文件大小sizes2，类型都是数组类型，然后每次上传成功后，将文件名称和大小分别储存在对应的变量中，保存之后再逐一去显示到页面上，显示完之后还要调用下keyup事件，然后所有的数据都会到textarea上了，然后点击保存就会提交到后台接口。为了保证准确性，在返显到页面的时候，我们延迟一秒执行，代码如下：

var len2=$('#p-files li').length;
setTimeout(function (){
    for (var i=0;i<len2;i++){
        $("input[name='"+"row[desc]["+i+"][info]"+"']").val(names2[i]);
        $("input[name='"+"row[desc]["+i+"][size]"+"']").val(sizes2[i]);
        $("input[name='"+"row[desc]["+i+"][info]"+"']").keyup();
    }
},1000);