导航：首页 > 开发技术 >

怎么用js实现文件上传样式详情

发表于：2024-12-12 作者：千家信息网编辑

千家信息网最后更新 2024年12月12日，本篇内容介绍了"怎么用js实现文件上传样式详情"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！1、概述

千家信息网最后更新 2024年12月12日怎么用js实现文件上传样式详情

本篇内容介绍了"怎么用js实现文件上传样式详情"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

1、概述

这个js包括按钮样式，列表样式、带有删除、添加、放大（使用的是自带的放大功能，提供有API来放入你的弹窗来进行展示）

可监听的事件	Value	wdaasd
onlargeClickCallBack	如果想使用自己的弹窗，只需要监听这个函数，拿到返回值给你的弹窗的img->href进行赋值即可	imgFile对象（包括这个被点击图片的全部信息）that（这个js的全局唯一对象，可以在这里面拿到你所有的值）
ondialogBeforeClose	自带的弹窗被关闭的回调	object 返回值是一个对象对象.event -> 被执行的事件的源事件对象.imgFile -> 被点击关闭弹窗时，目前弹窗上展示的图片对象信息
onaddImgList	每添加一个图片的回调	file -> 文件对象 that -> （这个js的全局唯一对象，可以在这里面拿到你所有的值）

2、创建对象的参数

参数	含义
maxFileLength	最大可以存在的文件个数默认值：2
maxFileSize	每个文件单独最大的文件大小默认值：1024 （1M）
fileSuffix	允许上传的文件后缀默认值：['mp4', 'mp3', 'word', 'pdf', 'ppt', 'excel', 'jpg', 'png']
StopDialog	是否阻止打开自带的默认弹窗默认值：false
shadeDialogStyle	如果打开自带弹窗的选项，那么这个控制打开的弹窗高宽多少默认值：[null, null],默认为null为自适应，如果想要设置百分比和px 请直接改变数组[0,1]，数组第一项代表宽，第二项代表高
showBtnImgStyle	是否开启按钮样式默认值：false

使用代码示例：

                                                                                                        
                
            
                                                           选择图片                
            
                                    
        
var file = new File({     maxFileLength: 2,     maxFileSize: 1024,     fileSuffix: ['mp4', 'mp3', 'word', 'pdf', 'ppt', 'excel', 'png', 'jpg'],     StopDialog: false,     showBtn: false }); initHJFile(file);

3、监听例子

//如果不想使用自带的弹窗，可以选择监听file对象的onlargeClickCallBack函数file.callBack.onlargeClickCallBack = function (img, that) {}file.callBack.ondialogBeforeClose = function (event) {}file.callBack.onaddImgList = function () {}

4、使用方法

项目目录如上图所示
如果要使用，只需要把js放入你的项目路径下，然后把img放到你的static目录（静态资源路径）。
这里js里面默认引入的图标是 ./ 的相对路径，请自行搜索然后进行更改为你项目的文件路径
上图项目示例为可直接打开查看的完整包，后文有下载地址

5、源代码

此源代码为不包括图标的源代码，全部在一个html页面里面