关于angular:angular-上传本地文件样式优化

前言

input标签下将type="file"能够抉择本地文件上传,然而默认款式不太好看,想着优化一下。

这是默认款式。

丑化之路

bootstarp

bootstarp里仿佛没有对文件上传款式优化,惟一提到相干内容的中央还是默认的款式

谷歌

谷歌搜寻bootstarp input file,第二条给我推送了一个不错的款式,咱们来看看成果

嗯,不错,成果高大上,就用这个了。
连贯:这是demo地址
这个名叫bootstrap-inputfile的包应该是基于bootrarp款式写的,并且反对应用npm 命令导入,然而我在尝试依照教程导入之后,显示的成果还是跟原生一样,这阐明我没有正确导入,因为教程是对于angularjs的实例,我尝试去谷歌找对于angular的应用教程,有npm官网对于他的应用教程,我尝试执行,然而有一步引入没有见过相干文件,上网一查原来是angularjs的文件。,遂放弃。

angular

谷歌搜寻对于angular bootstarp input file,搜寻到了对于一个较官网的demo,
连贯: angular-custom-file-input
demo提供了所有代码与实现成果。照着这个就能实现成果。

bootstrap-fileinput

在写博客的时候,我又尝试了一次装置bootstrap-fileinput,仍旧是原款式。我去谷歌搜寻anuglar use bootstarp-fileinput,找到了github的仓库地址,而后我去close issue里找angular相干内容,

虽说他用中文提的issue并且问的是提交问题,却从中走漏出是能够应用的。
我找学长帮忙解决。
在此记录一下学长的解决过程。
首先学长先看了一下官网的导入教程。发现不太实用于angular我的项目。

教程第一步用link标签导入一些线上资源,我照做了。学长说用这种形式可能会有问题,如果地址变动,我的项目就解体了。最好用线下的,我用npm命令曾经下载到线下了。只有照着bootstrap的步骤导入就可。下载后在angular.json引入相干包

"styles": [
         "src/styles.scss",
         "./node_modules/bootstrap/dist/css/bootstrap.css",
         "./node_modules/bootstrap-fileinput/css/fileinput.css"
],
"scripts": [
              "./node_modules/bootstrap-fileinput/js/fileinput.js",
              "./node_modules/bootstrap-fileinput/js/plugins/piexif.js",
              "./node_modules/bootstrap-fileinput/js/plugins/sortable.js",
              "./node_modules/bootstrap-fileinput/js/locales/LANG.js",
]              

引入后测试还是没有成果。
学长间接通过连贯看了css的源码,如果用其中的一个款式的话,源码是执行的

然而其实css里的源码也没有过多的款式,学长猜想可能是js里的文件听过找到这个file类设置的成果。上面就是js文件没有实现的问题。
学长轻易写了一个js文件,发现是能够实现js的。
而后看了一下sources,

发现也是胜利导入了。
而后学长在index.html里应用,发现却是能够失常显示的

<body>
<input id="input-id" type="file" class="file" data-preview-file-type="text">
<app-root></app-root>
</body>


学长猜想可能是惰性加载的问题,而后把惰性加载去掉,在路由间接援用组件,发现胜利实现。
上谷歌搜寻一下问题,

解决办法是在惰性加载下间接import引入,成果实现胜利。

缺点

input输出file还是有一些有余

In this mode, you do not set the uploadUrl property. The plugin will use the native file input to store files and it can be read after a normal FORM submission (you must envelop the input within a FORM). This is useful for single file uploads OR simpler scenarios of multiple file uploads. Configuration is straightforward as you can read all data POSTED from a native form submission. However, note that the native file input is read only and cannot be modified or updated by external code. Especially for multiple file input selections, ONE cannot append files to an already selected file list. If one tries to select files on an already selected file input, it will overwrite and clear the previous selection. Similarly, one cannot selectively remove/delete files that have been added before upload in this mode.

像bootstrap-fileinput所说的一样,你用原生input标签尽管能够应用multiple使一次能够抉择多个文件,然而每次抉择的文件总会笼罩掉上一次抉择的文件。
教程也给了其余实现形式,Mode 2: Ajax Submission

感激

在此感激黄学长的帮忙。

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

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

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据