bootstrap-fileinput视频上传

时间:2023-01-16 19:18:41

在页面编写一个input框:

<input id="input-repl-3a" name="videoFileAddress" type="file" accept="mp4,avi,dat,3gp,mov,rmvb" />

页面导入的css文件:

<link href="/static/bootstrap-fileinput-4.4.8/css/fileinput.min.css" rel="stylesheet" />
<link href="/static/bootstrap-fileinput-4.4.8/css/fileinput-rtl.min.css" rel="stylesheet" />

页面导入的js文件:

<script src="/static/bootstrap-fileinput-4.4.8/js/fileinput.min.js"></script>
<script src="/static/bootstrap-fileinput-4.4.8/js/zh.js"></script>

javascript代码放在body的后面: 

<script th:inline="javascript">
 $("#input-repl-3a").fileinput({
dropZoneTitle : "请上传小于150M的视频!",
uploadUrl : "saveVideoAddress",
language : "zh",
autoReplace : true,
showCaption : false,
showUpload : true,
overwriteInitial : true,
showUploadedThumbs : true,
//showPreview:false, //显示上传图片的大小信息
maxFileCount : 1,
minFileCount:1,
maxFileSize : 153600,//文件最大153600kb=150M
initialPreviewShowDelete : false,
showRemove : false,//是否显示删除按钮
showClose : false,
layoutTemplates : {
actionUpload:'',
},
allowedFileExtensions : [ "mp4","avi","dat","3gp","mov","rmvb"],
previewSettings : {
image : {
width : "100%",
height : "100%"
},
}
});</script>

视频上传到ftp服务器的后台java代码:

public ModelMap saveVideoAddress(@RequestParam("videoFileAddress") MultipartFile videoFileAddress,
HttpServletRequest request, HttpServletResponse response) {
ModelMap map = new ModelMap();
String paFileName = videoFileAddress.getOriginalFilename();
try {
FtpUtil ftpUtil = new FtpUtil();
FTPClient ftp = ftpUtil.getConnectionFTP(UploadFileUrlUtil.HOST_NAEM, UploadFileUrlUtil.PORT,
UploadFileUrlUtil.USER_NAME, UploadFileUrlUtil.PASSWORD);
String filename = FtpUtil.getFileName(videoFileAddress);
boolean bool = ftpUtil.uploadFile(ftp,UploadFileUrlUtil.GetPath(UploadFileUrlUtil.VIDEO_PATH) , filename,
videoFileAddress.getInputStream());
if (bool) {
String url =UploadFileUrlUtil.GetPath(UploadFileUrlUtil.VIDEO_PATH) + filename;
map.put("videoAddress", url);
map.put("videoName", paFileName);
System.out.println("上传成功!");
boolean boolClose = ftpUtil.closeFTP(ftp);
if (boolClose) {
System.out.println("关闭ftp连接成功!");
} else {
System.out.println("关闭ftp连接失败!");
}
} else {
System.out.println("上传失败!");
} } catch (Exception e1) {
// TODO Auto-generated catch block
e1.printStackTrace();
}
return ReturnUtil.Success("加载成功", map, null);
}

远程服务器的配置信息:

public class UploadFileUrlUtil {
// 远程服务器的配置信息
public final static String HOST_NAEM="127.0.0.1";
public final static Integer PORT=21;
public final static String USER_NAME="123456"; //ftpuser
public final static String PASSWORD="123456";
public final static int LOCALHOST= 8080; public final static String BIG_PATH="/upload/picture/big/"; //主图路径
public final static String SMALL_PATH="/upload/picture/small/"; //副图的路径
public final static String VIDEO_PATH="/upload/picture/video/"; //视频的路径
public final static String HOST= "http://192.168.0.140:8080";// 上传的端口 public static String GetPath(String path) {
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
String date=sdf.format(new Date());
return path+date+"/";
}
}

视频上传的js文件下载链接:  https://pan.baidu.com/s/1zwfJB00oKplfZIImLN6BWw 密码: atb6

bootstrap-fileinput视频上传的更多相关文章

  1. bootstrap fileinput 文件上传工具

    这是我上传的第二个plugin 首先第一点就是因为这个好看 符合bootstrap的界面风格 第二是可以拖拽(虽然我不常用这个功能 但是这样界面看起来就丰满了很多) 最后不得不吐槽这个的回发事件 我百 ...

  2. bootstrap fileinput添加上传成功回调事件

    国外牛人做的bootstrap fileinput挺酷的,但是可惜没有提供自定义上传成功回调事件的接口,因此感到非常头疼,但是很幸运的是,我在网上搜索到一个提问帖子,它问到使用Jquery的on函数绑 ...

  3. bootstrap fileinput 文件上传

    最近因为项目需要研究了下bootstrap fileinput的使用,来记录下这几天的使用心得吧. 前台html页面的代码 <form role="form" id=&quo ...

  4. bootstrap fileinput&plus;MVC 上传多文件&comma;保存

    新增用户资料,需要用户上传多笔附件,所以就尝试用了fileinput控件,显示效果如图: 首先,先在model中定义数据模型: public partial class create { [Requi ...

  5. 【腾讯云的1001种玩法】 Laravel 整合微视频上传管理能力,轻松打造视频App后台

    版权声明:本文由白宦成原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/108597001488193402 来源:腾云阁 h ...

  6. 微信小程序选择视频,视频上传,视频播放

    请查看链接地址看具体详情: 选择视频: https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-video.html#wxchoosevideoobje ...

  7. 腾讯云点播视频存储&lpar;Web端视频上传&rpar;

    官方文档 前言 所谓视频上传,是指开发者或其用户将视频文件上传到点播的视频存储中,以便进行视频处理.分发等. 一.简介 腾讯云点播支持如下几种视频上传方式: 控制台上传:在点播控制台上进行操作,将本地 ...

  8. 「小程序JAVA实战」小程序视频上传方法的抽象复用(57)

    转自:https://idig8.com/2018/09/23/xiaochengxujavashizhanxiaochengxushipinshangchuanfangfadechouxiangfu ...

  9. HTML&plus;JS实现视频上传显示进度条

    示例代码: css部分: #content{border: 1px solid saddlebrown;padding: 16px;border-radius: 2px} .list {top: 15 ...

随机推荐

  1. KSFramework常见问题:Excel如何进行SVN协作、差异比较?

    Excel如何进行SVN协作.差异比较? 嗯,这是一个令人困惑的问题.游戏开发.程序开发时,使用Excel可以添加文档.注释.图标.批注等等各种辅助信息: 但是Excel是非纯文本格式,在使用SVN. ...

  2. HDU 3652 B-number(数位dp)

    题意:B数的定义是有字符串“13”且能被整数13整除的数,求[1,n]内的B数个数. 题解:这是数位DP,我也就是刚入门,前两天看到了非递归写法,好麻烦.所以我建议写dfs的方法,容易理解,代码还简短 ...

  3. C&num; 实现无标题栏窗体点击任务栏图标正常最小化或还原的解决方法

    /// <summary> /// 实现窗体的最小化 /// </summary> protected override CreateParams CreateParams { ...

  4. 第一pga 畸形消费分析

     第一pga 畸形消费分析 os: aix 6 db:10205 ------使用os 命令观察oracle 存消耗情况 #ps gv ......                         ...

  5. oracle 合并多个sys&lowbar;refcursor

    一.背景 在数据开发中,有时你需要合并两个动态游标sys_refcursor. 开发一个存储过程PROC_A,这个过程业务逻辑相当复杂,代码篇幅较长.一段时间后要开发一个PROC_B,要用PROC_A ...

  6. 使用Redis构建全局并发锁

    谈起Redis的用途,小伙伴们都会说使用它作为缓存,目前很多公司都用Redis作为缓存,但是使用Redis仅仅作为缓存未免太大材小用了.深究Redis的原理后你会发现它有很多用途,在很多场景下能够使用 ...

  7. 详解Nginx服务器配置

    #运行用户 user nobody; #启动进程,通常设置成和cpu的数量相等 worker_processes ; #全局错误日志及PID文件 #error_log logs/error.log; ...

  8. 剑指offer第32题:把数组排成最小的数及关于list&period;sort&lpar;&rpar;和sorted&lpar; Iterable object &rpar;函数的相关知识

     * 解题思路:  * 先将整型数组转换成字符数组,然后将String数组排序,最后将排好序的字符串数组拼接出来.关键就是制定比较规则.  * 排序规则如下:  * 若ab > ba 则 a & ...

  9. 20175234 2018-2019-2 《Java程序设计》第六周学习总结

    20175234 2018-2019-2 <Java程序设计>第六周学习总结 教材学习内容总结 第七章内部类和异常类 总结 Java支持在一个类中声明另一个类,这样的类称作内部类,而包含内 ...

  10. docker &plus; spring boot 打包 部署。

    docker 安装 什么的 就不一一介绍了 不会安装百度一找一堆. 我这直接上代码. 首先你要有个spring boot项目. 然后打包.打包很简单 我打包的是 jar文件.直接在pom.xml文件里 ...