fastadmin选择文件或图片获取文件名称,文件大小,文件类型等信息

当选择图片图片或文件后想自定义显示当前选中文件的文件类型,文件名称,文件大小,文件sha1等信息,如下图所示,当选择一个文件自动显示当前文件名称

实现方法为在回调事件添加回调参数在赋值给指定文本框

编辑require-form.js代码

修改parent.Fast.api.open方法,大概在278行
parent.Fast.api.open(url + "?element_id=" + $(this).attr("id") + "&multiple=" + multiple + "&mimetype=" + mimetype + "&admin_id=" + admin_id + "&user_id=" + user_id, __('Choose'), {
                            callback: function (data) {
                                var button = $(that);
                                var maxcount = $(button).data("maxcount");
                                var input_id = $(button).data("input-id") ? $(button).data("input-id") : "";
                              
                                
                                maxcount = typeof maxcount !== "undefined" ? maxcount : 0;
                                // console.log(data)
                                // console.log(button)
                                // console.log(input_id)
                                if (input_id && data.multiple) {
                                    var urlArr = [];
                                    var inputObj = $("#" + input_id);
                                    var value = $.trim(inputObj.val());
                                    if (value !== "") {
                                        urlArr.push(inputObj.val());
                                    }
                                    var nums = value === '' ? 0 : value.split(/\,/).length;
                                    var files = data.url !== "" ? data.url.split(/\,/) : [];
                                    $.each(files, function (i, j) {
                                        var url = Config.upload.fullmode ? Fast.api.cdnurl(j) : j;
                                        urlArr.push(url);
                                    });
                                    if (maxcount > 0) {
                                        var remains = maxcount - nums;
                                        if (files.length > remains) {
                                            Toastr.error(__('You can choose up to %d file%s', remains));
                                            return false;
                                        }
                                    }
                                    var result = urlArr.join(",");
                                    inputObj.val(result).trigger("change").trigger("validate");
                                } else if (input_id) {
                                    var url = Config.upload.fullmode ? Fast.api.cdnurl(data.url) : data.url;
                                   
                                    $("#" + input_id).val(url).trigger("change").trigger("validate");
                                    var filename = $(button).data("input-filename") ? $(button).data("input-filename") : "";
                                    var sha1 = $(button).data("input-sha1") ? $(button).data("input-sha1") : "";
                                    var filesize = $(button).data("input-filesize") ? $(button).data("input-filesize") : "";
                                    var imagetype = $(button).data("input-imagetype") ? $(button).data("input-imagetype") : "";
                                    console.log('文件名称:',filename);
                                    if(filename){
                                        $("#" + filename).val(data.filename)
                                    }
                                    if(sha1){
                                        $("#" + sha1).val(data.sha1)
                                    }
                                    if(filesize){
                                        $("#" + filesize).val(data.filesize)
                                    }
                                    if(imagetype){
                                        $("#" + imagetype).val(data.imagetype)
                                    }
                                    
                                    
                                    
                                }

                                // 触发选择文件自定义事件
                                button.trigger("fa.event.selectedfile", data);
                            }
                        });

新增了几行代码,意思是选中文件后给文本框赋值

var filename = $(button).data("input-filename") ? $(button).data("input-filename") : "";
                                    var sha1 = $(button).data("input-sha1") ? $(button).data("input-sha1") : "";
                                    var filesize = $(button).data("input-filesize") ? $(button).data("input-filesize") : "";
                                    var imagetype = $(button).data("input-imagetype") ? $(button).data("input-imagetype") : "";
                                    console.log('文件名称:',filename);
                                    if(filename){
                                        $("#" + filename).val(data.filename)
                                    }
                                    if(sha1){
                                        $("#" + sha1).val(data.sha1)
                                    }
                                    if(filesize){
                                        $("#" + filesize).val(data.filesize)
                                    }
                                    if(imagetype){
                                        $("#" + imagetype).val(data.imagetype)
                                    }

修改选择文件html代码

<div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Cover')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="input-group">
                <input id="c-cover" class="form-control" size="50" name="row[cover]" type="text" value="{$row.cover|htmlentities}">
                <div class="input-group-addon no-border no-padding">
                    <span><button type="button" id="faupload-cover" class="btn btn-danger faupload" data-input-id="c-cover" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp,image/webp" data-multiple="false" data-preview-id="p-cover"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                    <span><button type="button" id="fachoose-cover" class="btn btn-primary fachoose" data-input-id="c-cover" data-input-filename="c-filename-cover"  data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                </div>
                <span class="msg-box n-right" for="c-cover"></span>
            </div>
            <ul class="row list-inline faupload-preview" id="p-cover"></ul>
        </div>
    </div>

<span><button type="button" id="fachoose-cover" class="btn btn-primary fachoose" data-input-id="c-cover" data-input-filename="c-filename-cover"  data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>

还需要添加需要填充值的input框,data-input-filename值为c-filename-cover,那么input元素的ID为c-filename-cover,当选择文件后回调才能填充到该元素

<input id="c-filename-cover" style="border: none;height: 15px;font-size: 12px;scale: 0.8;" type="text" value="">

只做了显示还不行,因为选择文件或图片后可能会删除重新选择,删掉后也需要把其他填充的信息也相应删除掉,在id为faupload-cover元素添加相应data-input-filename="c-filename-cover",sha1,filesize,imagetype等信息删除添加对应data值data-input-sha1(文件sha1),data-input-filesize(文件大小),data-input-imagetype(文件类型)

<button type="button" id="faupload-cover" class="btn btn-danger faupload" data-input-id="c-cover" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp,image/webp" data-multiple="false" data-preview-id="p-cover" data-input-filename="c-filename-cover"><i class="fa fa-upload"></i> {:__('Upload')}</button>

var filename = $(that).data("input-filename") ? $(that).data("input-filename") : "";
                        var sha1 = $(that).data("input-sha1") ? $(that).data("input-sha1") : "";
                        var filesize = $(that).data("input-filesize") ? $(that).data("input-filesize") : "";
                        var imagetype = $(that).data("input-imagetype") ? $(that).data("input-imagetype") : "";

在移除按钮事件里添加

if(filename){
                                    $("#" + filename).val('')
                                }
                                if(sha1){
                                    $("#" + sha1).val('')
                                }
                                if(filesize){
                                    $("#" + filesize).val('')
                                }
                                if(imagetype){
                                    $("#" + imagetype).val('')
                                }