创新实训——bootstrap-fileinput实现视频文件上传

今天研究了一下午bootstrap扩展的文件上传控件,因为实在忍受不了默认无样式的文件上传。

效果如图:

创新实训——bootstrap-fileinput实现视频文件上传_第1张图片

是不是感觉瞬间高大上了很多,而且上传后的文件可以进行在线浏览,全屏播放:

创新实训——bootstrap-fileinput实现视频文件上传_第2张图片

不要着急,下面附上具体实现过程。


1.首先是插件。

具体的插件和example可以从

https://www.cnblogs.com/parker-yu/p/7207071.html

下载


2.然后是form表单

下载并引用了相应文件后,进行html form的编写:

创新实训——bootstrap-fileinput实现视频文件上传_第3张图片

这是我form表单中的一部分,很简洁。


3.然后是用Js进行对用input的设置

创新实训——bootstrap-fileinput实现视频文件上传_第4张图片

这里allowedFileExtensions:用来限制上传文件的类型。


4.最后是进行php方法的书写


这里我的表单提交方法为uploadcourse(),位于index.php中的一个方法

创新实训——bootstrap-fileinput实现视频文件上传_第5张图片

其中fileinput的处理使用了TP5.0的request方法。

最后上传的视频被保存到了uploadv目录下:

创新实训——bootstrap-fileinput实现视频文件上传_第6张图片


5.注意!!!

在进行文件上传前需要前往PHP下的php.ini文件进行配置,因为php默认上传的最大文件为2M,所以大部分视频都无法上传,这一点博主一开始没有注意,结果折腾了一下午没找到问题所在,这里给出相应配置链接:

https://blog.csdn.net/anan890624/article/details/51859863

你可能感兴趣的:(创新实训——bootstrap-fileinput实现视频文件上传)