Bootstrap File Input,最好用的文件上传组件(2)-阿里云开发者社区

开发者社区> 沉默王二> 正文

Bootstrap File Input,最好用的文件上传组件(2)

简介: Bootstrap File Input,最好用的文件上传组件
+关注继续查看

六、服务器端保存图片


请参照后端springMVC文件保存


ps:以上博客留了一个小疑问,一直没有去研究,直到有位非常棒的小伙伴 ihchenchen 给了我如下的提醒:


allowedFileTypes 、allowedFileExtensions 我知道为什么没有效果,因为 fileinput() 方法调用了两次,一次在 fileinput.js 里面最后几行,还有一次就是你自己写的 $(this).fileinput()。在fileinput.js里的是没有设置allowedFileTypes 、allowedFileExtensions 值的。

有两种方法可以改:

1、把fileinput.js里的最后几行调用注释掉。

2、全部使用“data-”的方法来做,不写$(this).fileinput()。


对于ihchenchen善意的提醒,我非常的感谢,虽然他提供的解释并没有解决我的疑问,但是我很喜欢这样有互动的技术交流,之前写很多博客,基本上很少发生这样善意并且行之有效的回答。这让我想起中国程序员和外国程序员,里面的故事让人震撼之余,捎带着些许的惭愧。那么如何做到“Ask questions, get answers, no distractions。”就显得特别珍贵,而“ihchenchen”则充满这种精神!


六、解惑allowedFileTypes 、allowedFileExtensions


之前困惑为什么bootstrap fileinput为什么设置了这两个属性后,没有效果,其实是我自己的误解,如今经过一番痛彻的领悟后恍然大悟!


①、allowedFileTypes


allowedFileTypes

array the list of allowed file types for upload. This by default is set to null which means the plugin supports all file types for upload. If an invalid file type is found, then a validation error message as set in msgInvalidFileType will be raised. The following types as set in fileTypeSettings are available for setup.

[‘image’, ‘html’, ‘text’, ‘video’, ‘audio’, ‘flash’, ‘object’]

先从“allowedFileTypes”说起,该属性告知我们文件的选择类型,那么我们很容易想到这样的画面:

image.png


也就是说,我们希望此时的“所有文件”处不是“所有文件”,而是“image”之类的。显然这样的逻辑并没有错,但却不适合bootstrap fileinput!


那么,这个时候我就很容易认为“allowedFileTypes” 没有起到作用!


但请看下图:

image.png


吼吼,原来是在你选择了文件后发生的类型检查!


②、allowedFileTypes工作原理


$(this).fileinput({
    showUpload : false,
    showRemove : false,
    language : 'zh',
    allowedPreviewTypes: ['image'],
          allowedFileTypes: ['image'],
          allowedFileExtensions:  ['jpg', 'png'],
    maxFileSize : 2000,
   
    });


通过fileinput方法我们加载一个bootstrap fileinput组件,那么其内部是如何实现allowedFileTypes的呢?


通过在fileinput.js文件中搜索“allowedFileTypes”关键字,我们得到如下代码:


var node = ctr + i, previewId = previewInitId + "-" + node, isText, file = files[i],
                    caption = self.slug(file.name), fileSize = (file.size || 0) / 1000, checkFile, fileExtExpr = '',
                    previewData = objUrl.createObjectURL(file), fileCount = 0, j, msg, typ, chk,
                    fileTypes = self.allowedFileTypes, strTypes = isEmpty(fileTypes) ? '' : fileTypes.join(', '),
                    fileExt = self.allowedFileExtensions, strExt = isEmpty(fileExt) ? '' : fileExt.join(', ');

然后我们继续看到如下的代码:


if (!isEmpty(fileTypes) && isArray(fileTypes)) {
                    for (j = 0; j < fileTypes.length; j += 1) {
                        typ = fileTypes[j];
                        checkFile = settings[typ];
                        chk = (checkFile !== undefined && checkFile(file.type, caption));
                        fileCount += isEmpty(chk) ? 0 : chk.length;
                    }
                    if (fileCount === 0) {
                        msg = self.msgInvalidFileType.replace('{name}', caption).replace('{types}', strTypes);
                        self.isError = throwError(msg, file, previewId, i);
                        return;
                    }
                }


我们可以发现,文件类型的检查是发生在checkFile方法上,那么checkFile方法到底做了些什么呢?


defaultFileTypeSettings = {

       image: function (vType, vName) {

           return (vType !== undefined) ? vType.match('image.*') : vName.match(/\.(png|jpe?g)$/i);

       },

       ...


以上就是checkFile的内容。


也就是说当我们指定allowedFileTypes: ['image'],时,就会进行image的类型检查。

显然我们选择的txt文件不属于image类型,那么就会匹配不上,出现以上界面。

同时,该方法告诉我们,当不指定allowedFileTypes: ['image'],,只指定allowedFileExtensions: ['jpg', 'png'],就会执行vName.match(/\.(png|jpe?g)$/i),也就是文件后缀类型的检查,这点很关键啊,为我们接下来介绍“allowedFileExtensions”奠定基础。

③、allowedFileExtensions什么时候起作用


上节我们讨论完“allowedFileTypes”,捎带说了“allowedFileExtensions”,那么如何让后缀进行check呢?


$(this).fileinput({
    showUpload : false,
    showRemove : false,
    language : 'zh',
    allowedPreviewTypes: ['image'],
          allowedFileExtensions:  ['jpg', 'png'],
    maxFileSize : 2000,
   
    });

fileinput组件此时指定的属性如上,没有了“allowedFileTypes”,并且指定允许的后缀类型为“[‘jpg’, ‘png’]”,也就是说,假如我们选择了gif的图片就会出现错误提示。

image.png


错误预期的发生了,那么请特别注意:


image: function (vType, vName) {
            return (vType !== undefined) ? vType.match('image.*') : vName.match(/\.(png|jpe?g)$/i);
        },


fileinput.js文件中原始的代码如下:


image: function (vType, vName) {
            return (vType !== undefined) ? vType.match('image.*') : vName.match(/\.(gif|png|jpe?g)$/i);
        },


image类型的后缀当然默认包含了gif,我只是为了举例说明,代码做了调整,请注意!



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
关于FileZilla上传文件后服务器端文件与本地文件大小不一致的解决方法
最近在调试网站时发现,通过ftp上传工具FileZilla上传至服务器端的文件与本地文件大小不一致,虽然没有影响网站的最终显示效果,但仍让我困惑不解。后发现是传输类型的原因,解决方法如下: 中文版FileZilla菜单栏->传输->传输类型->二进制(Binary) 造成大小不一致的原因:ASCII模式和二进制(Binary)模式的区别是回车换行的处理,Binary模式不对数据进行任何处理,ASCII模式将回车换行转换为本机的回车字符,比如:UNIX下是\n,Windows下是\r\n,Mac下是\r。
1482 0
uploadfile上传文件失败,数据接收不到问题排查步骤。
1.[font=宋体]检查域名白名单是否已经添加。[/font] 2.[font=宋体]上传[/font]URL[font=宋体]是否写对。[/font] 3.[font=宋体]服务器接收是否正确。
635 0
对象存储OSS如何通过PutObject上传文件?
迁移OSS的文件,就是将用户其他数据源的文件迁移至OSS。接下来几篇文章将介绍的方法是以下四种:一、通过API/SDK上传文件;二、通过API/SDK拷贝文件;三、通过oss-import工具迁移文件;四、通过云市场服务迁移文件。
7646 0
与文件上传到的三个类:FileItem类、ServletFileUpload 类、DiskFileItemFactory类
文件上传: ServletFileUpload负责处理上传的文件数据,并将表单中每个输入项封装成一个FileItem对象中, 在使用ServletFileUpload对象解析请求时需要根据DiskFileItemFactory对象的属性sizeThreshold(临界值)和repository(临时目录)来决定将解析得到的数据保存在内存还是临时文件中,如果是临时文件,保存在哪个临时目录中?。
973 0
SpringMVC文件上传(MultipartFile)
SpringMVC文件上传(MultipartFile)
5 0
第6周-任务5-多文件组织三角形类
【题目】将任务4(第6周-任务4-用点类作成员的三角形类)中的的解决用一个项目多个文件的方式实现,其中两个类的声明放在一个.h文件中,每个类的成员函数分别放一个文件,main()函数用一个文件。体会这样安排的优点。 【要点】对多个文件一个项目的组织方法的一般原则是:(1)若干个功能相近的类的声明放在一个头文件中;(2)每个类的成员函数分别放在一个.cpp文件中;(3)如果有main(
893 0
+关注
沉默王二
微信搜索「沉默王二」,回复关键字「00」获取硬核计算机基础资料。
1084
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载