前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

JS插件学习分享:inputfile插件流程化学习

入门一种新的插件有没有一种通用的方法呢?

以下将需要3分钟左右的阅读时间。


第一步阅读说明简介。了解到:目前是4.4版支持Bootstrap3.x及4.0版。5.x版本是重写的一个最新版本。该插件去预览上传多种格式的文件。支持Ajax。以下以4.4版说明。

第二步安装(引用)。引用CSS、JS(注意顺序)

CSS:bootstrap.min.css,fileinput.min.css

JS:

jquery-3.3.1.min.js,(必需)

piexif.min.js(可选,可以在上传前改变图片),

sortable.min.js(可选,如果要排序文件的话),

popper.min.js(可选,用于放大和预览文件),

bootstrap.min.js,(必需)

fileinput.min.js,(主文件)

theme.js,(主题包,字体)

(lang).js(本地化,中文引入zh.js)

第三步使用。

<!--HTML  input标签 ,注意type是file-->
<input id="ID" type="file" class="file" data-preview-file-type="text" >

$("#ID").fileinput();//默认功能,$("#input-id") 。Jquery对象,HTML代码中的id为ID
															//fileinput()执行函数。可以放在$(function(){..放在这里..})也可以放在任何
															//一位置

总结:以上是步骤,相信学习一个新的插件都能以这种标准流程一定会有收获。

下次将分享常用的属性和例子代码学习。

详细学习两个重要的属性:initialPreview,initialPreviewConfig。

下回再见。谢谢阅读。晚安。

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言