fileinput基本使用[通俗易懂]

fileinput基本使用[通俗易懂]新增$(“#attachmentsFile”).fileinput({theme:”fa”,showPreview:true,//是否显示预览hideThumbnailContent:true,//是否在缩略图中隐藏预览内容(图像,pdf内容,文本内容等)。showUpload:false,//隐藏上传按钮…

大家好,又见面了,我是你们的朋友全栈君。

新增

 $("#attachmentsFile").fileinput({
        theme: "fa",
        showPreview: true, //是否显示预览
        hideThumbnailContent: true,//是否在缩略图中隐藏预览内容(图像,pdf内容,文本内容等)。
        showUpload: false, //隐藏上传按钮
        showRemove: false, //隐藏清除按钮
        overwriteInitial: false,
        language: 'zh',
        browseClass: "btn btn-hinfo",
        browseLabel: "附件",
        layoutTemplates: {
            //actionDelete: '',//去除上传预览的缩列图中的删除图标
            actionUpload: '',//去除上传预览的缩列图中的上传图标
            actionZoom: '',//去除上传预览的缩列图中的预览图标
        },
    }).on('change', function (event) {
    }).on('filepredelete', function (event, key, jqXHR, data) {
        return !confirm('确定删除原文件?删除后不可恢复!');
    });

修改

function initFileInput(id) {
    var initialPreviews = [], initialPreviewConfigs = [];
    $.ajax({
        url: '/attachment/fileinfos',
        type: "GET",
        async: false,
        data: {id: id},
        success: function (res) {
            if (res.success == true) {
                if(res.data.length>0){
                    res.data.forEach(function (element, index) {
                        initialPreviews.push(element.path);
                        initialPreviewConfigs.push({
                            previewAsData: false,
                            downloadUrl: element.path,
                            caption: defaultValue(element.fileName,"附件"+index),
                            width: '120px',
                            url: '/attachment/delete',
                            key: element.id,
                            extra: function() {
                                return {id: element.id};
                            }
                        });
                    });
                }
            } else {
                toastr.error(res.message);
            }
        },
        error: function (res) {
            toastr.error("请求失败");
        },
        complete: function () {
            closeModalWithJs(pageData.updateModal);
        }
    });
    $("#attachmentsFileU").fileinput('destroy');
    $("#attachmentsFileU").fileinput({
        theme: "fa",
        uploadUrl: "不然没有新文件删除按钮",
        showPreview: true, //是否显示预览
        hideThumbnailContent: true,//是否在缩略图中隐藏预览内容(图像,pdf内容,文本内容等)。
        showUpload: false, //隐藏上传按钮
        showRemove: false, //隐藏清除按钮
        showClose: false, //隐藏右上角叉
        overwriteInitial: false,
        language: 'zh',
        browseClass: "btn btn-hinfo",
        browseLabel: "附件",
        msgDuplicateFile: '"{name}"文件已经存在',
        initialPreviewAsData: true, // 确定你是否仅发送预览数据,而不是原始标记
        initialPreview: initialPreviews,
        initialPreviewConfig: initialPreviewConfigs,
        layoutTemplates: {
            //actionDelete: '',//去除上传预览的缩列图中的删除图标
            actionUpload: '',//去除上传预览的缩列图中的上传图标
            actionZoom: '',//去除上传预览的缩列图中的预览图标
        },
    }).on('change', function (event) {
    }).on('filepredelete', function (event, key, jqXHR, data) {
        return !confirm('确定删除原文件?删除后不可恢复!');
    });
}
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/133869.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • java中的io流知识总结_java数据流

    java中的io流知识总结_java数据流无意中发现了一个巨牛的人工智能教程,忍不住分享一下给大家。教程不仅是零基础,通俗易懂,而且非常风趣幽默,像看小说一样!觉得太牛了,所以分享给大家。点这里可以跳转到教程。内容概要JavaIO流的设计不得不让人拍案叫绝,佩服设计者鬼斧天工的手法。如果你是Java初学者,我敢保证第一次接触Java的IO类,一定会”狂晕!”,倒不是因为它有多么难学而是太多,而且及其让人有种“不识庐山…

    2022年10月20日
    3
  • Tp5 打开PDF文件乱码的问题「建议收藏」

    Tp5 打开PDF文件乱码的问题

    2022年2月11日
    41
  • modelsim se 10.1a 下载与破解

    modelsim se 10.1a 下载与破解学HDL避免不了的要用到modelsim,遗憾的是至今也没怎么用,昨天下载了modelsim装上了,鼓捣破解鼓捣了一阵子。     我是一个软件控,除非是对就器件不支持或者有明显bug的一般都会尝试用最新版,觉得既然搞电子做嵌入式就得更得上潮流,能适应得了新环境。所以很多软件,哪怕是用的再顺的除了变化较大的新版也会毫不犹豫去尝试。好了,闲话不多说,看一下modelsim,modelsim

    2022年5月16日
    43
  • 基于协同过滤的推荐系统设计_基于分类的协同过滤

    基于协同过滤的推荐系统设计_基于分类的协同过滤http://blog.csdn.net/pipisorry/article/details/51788955(个性化)推荐系统构建三大方法:基于内容的推荐content-based,协同过滤collaborativefiltering,隐语义模型(LFM,latentfactormodel)推荐。这篇博客主要讲协同过滤。协同过滤CollaborativeFiltering协同过滤:使用

    2025年7月17日
    4
  • Springboot自定义注解,支持SPEL表达式

    Springboot自定义注解,支持SPEL表达式举例,自定义redis模糊删除注解1.自定义注解importjava.lang.annotation.ElementType;importjava.lang.annotation.Retention;importjava.lang.annotation.RetentionPolicy;importjava.lang.annotation.Target;@Target(E…

    2025年6月17日
    4
  • linux 查看网络流量_linux 流量监控

    linux 查看网络流量_linux 流量监控可以使用iftop进行Linux机器的网络流量监控安装方法centos系统下第一步:安装EPEL源yuminstallepel-release第二部:安装iftopyuminstal

    2022年8月5日
    8

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号