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

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

1、概述

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

2、创建对象的参数

使用代码示例：

                        
                
                    
                                            
                
            
                       
                
                    选择图片                
            
                        
            
        
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页面里面

                    
        
                        
                
                    
                                            
                
            
            
                
                    选择图片                
            
            
            
        
    
    

"怎么用js实现文件上传样式详情"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！