文章目录
前言
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 class="row list-inline plupload-preview" id="p-files" data-template="desctpl" data-name="row[desc]">ul> <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);最后一步就是接口接收数据进行数据库保存了，这里我们直接用post的形式接收数据即可，注意这里接收到得数据是数组，然后处理数据保存入库。
总结
本文使用fastadmin自带的上传插件讲述了如何实现上传后的回调处理，并在此基础上对于如何实现批量上传这一场景进行了详细的描述，由于篇幅有限文中所含代码均为伪代码，如果要完整的代码请见下文源码下载地址。
源码下载地址
https://download.csdn.net/download/a1004991278/87403224
来源地址：https://blog.csdn.net/a1004991278/article/details/128797955
