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

javascript html php 2023-09-01 11:09:35 382人浏览泡泡鱼

摘要

文章目录前言一、上传回调二、批量上传总结前言 Fastadmin是基于thinkPHP5得一个快速开发开源框架，在市面上很流行，里边自定义了上传文件得方法，只需要简单调用即可使用

文章目录

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

前言

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);