bootstrap-fileinput视频上传
在页面编写一个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视频上传的更多相关文章
- bootstrap fileinput 文件上传工具
这是我上传的第二个plugin 首先第一点就是因为这个好看 符合bootstrap的界面风格 第二是可以拖拽(虽然我不常用这个功能 但是这样界面看起来就丰满了很多) 最后不得不吐槽这个的回发事件 我百 ...
- bootstrap fileinput添加上传成功回调事件
国外牛人做的bootstrap fileinput挺酷的,但是可惜没有提供自定义上传成功回调事件的接口,因此感到非常头疼,但是很幸运的是,我在网上搜索到一个提问帖子,它问到使用Jquery的on函数绑 ...
- bootstrap fileinput 文件上传
最近因为项目需要研究了下bootstrap fileinput的使用,来记录下这几天的使用心得吧. 前台html页面的代码 <form role="form" id=&quo ...
- bootstrap fileinput+MVC 上传多文件,保存
新增用户资料,需要用户上传多笔附件,所以就尝试用了fileinput控件,显示效果如图: 首先,先在model中定义数据模型: public partial class create { [Requi ...
- 【腾讯云的1001种玩法】 Laravel 整合微视频上传管理能力,轻松打造视频App后台
版权声明:本文由白宦成原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/108597001488193402 来源:腾云阁 h ...
- 微信小程序选择视频,视频上传,视频播放
请查看链接地址看具体详情: 选择视频: https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-video.html#wxchoosevideoobje ...
- 腾讯云点播视频存储(Web端视频上传)
官方文档 前言 所谓视频上传,是指开发者或其用户将视频文件上传到点播的视频存储中,以便进行视频处理.分发等. 一.简介 腾讯云点播支持如下几种视频上传方式: 控制台上传:在点播控制台上进行操作,将本地 ...
- 「小程序JAVA实战」小程序视频上传方法的抽象复用(57)
转自:https://idig8.com/2018/09/23/xiaochengxujavashizhanxiaochengxushipinshangchuanfangfadechouxiangfu ...
- HTML+JS实现视频上传显示进度条
示例代码: css部分: #content{border: 1px solid saddlebrown;padding: 16px;border-radius: 2px} .list {top: 15 ...
随机推荐
- 承接AR摄像头识别外包 AR图像识别 AR识别图像 AR识别应用外包
增强现实简称AR,是一种实时计算摄影机影像的位置及角度并加上相应图像的技术,这种技术的目标是在屏幕上把虚拟世界套在现实世界并实现互动. 这里千万别和VR虚拟现实混了.简单说就是VR看到的场景都是假的, ...
- leecode第三百四十四题(反转字符串)
class Solution { public: void reverseString(vector<char>& s) { int len=s.size(); char temp ...
- 自定义 Cordova插件详解
一.Cordova的基础点 在混合式应用中,我们通过现有的Cordova插件,可以轻松的在 H5 上调用手机native的功能.现有的Cordova插件能满足平时大部分的开发需求,然而,有时候找不到合 ...
- java日期和时间Date、Calendar、SimpleDateFormat
1 时间和日期 1.1 日期类Date和格式化SimpleDateFormat 日期使用过程中需要将日期Date对象转化为字符串,或者将字符串形式的日期转化为日期Date对象.可 ...
- java既然存在gc线程,为什么还存在内存泄漏?
java既然存在gc线程,为什么还存在内存泄漏? 1.既然 Java 的垃圾回收机制能够自动的回收内存,怎么还会出现内存泄漏的情况呢?这个问题,我们需要知道 GC 在什么时候回收内存对象,什么样的内存 ...
- PAT 1128 N Queens Puzzle
1128 N Queens Puzzle (20 分) The "eight queens puzzle" is the problem of placing eight ch ...
- K8s的调度策略
Scuedulor是K8s的调度器 sheduler 是作为单独的程序运行的,启动之后会一直坚挺 API Server,获取 PodSpec.NodeName为空的 pod,对每个 pod 都会创建一 ...
- vue-实例生命周期钩子(不太明白)
每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项}) 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要 ...
- uiautomatorviewer工具的安装与使用
Android自动化测试应用<一><uiautomatorviewer工具的安装与使用> OldKe 关注 2018.01.25 18:00* 字数 488 阅读 2083评论 ...
- CentOS 7系统上制作Clonezilla(再生龙)启动U盘并克隆双系统
笔记本安装的是双系统:Win7 64位,CentOS 7 64位. 政采就是个巨大的坑,笔记本标配的是5400转的机械硬盘,开机时间常常要一至两分钟,软件运行起来时各种数据的读写也非常慢,忍无可忍,决 ...