bootstrap fileinput上传文件
参考博客：https://blog.csdn.net/linhaiyun_ytdx/article/details/76215974
https://www.cnblogs.com/parker-yu/p/7207071.html
最近在最接口对接，需要将文件和一些其他参数发送到其他系统中去，发送文件用到了bootstrap fileinput。
一、首先要下载插件包
插件下载地址：https://github.com/kartik-v/bootstrap-fileinput/
二、引入js和css文件
<link rel="stylesheet" href="<%=request.getContextPath()%>/plug-in/bootstrap-fileinput/css/fileinput.min.css">
<script src="<%=request.getContextPath()%>/plug-in/bootstrap-fileinput/js/fileinput.min.js"></script>
<script src="<%=request.getContextPath()%>/plug-in/bootstrap-fileinput/js/locales/zh.js"></script>
三、代码：
1、页面文件
<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" href="<%=request.getContextPath()%>/plug-in/bootstrap-fileinput/css/fileinput.min.css">
<script src="<%=request.getContextPath()%>/plug-in/bootstrap-fileinput/js/fileinput.min.js"></script>
<script src="<%=request.getContextPath()%>/plug-in/bootstrap-fileinput/js/locales/zh.js"></script> <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bootstrap fileinput上传</title>
</head>
<body>
<div align="center">
<div class="container-fluid" style="width: 90%; margin-top: 2%">
<form class="form-horizontal" id="form" action="" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="exec_file" class="col-sm-2 control-label">上传文件<font color="red">*</font>:</label>
<div class="col-sm-10">
<input id="input-id" name="file" multiple type="file" data-show-caption="true" data-show-preview="false">
</div>
</div>
<div class="form-group">
<label for="name" class="col-sm-2 control-label">文件名称<font color="red">*</font>:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" placeholder="请输入文件名称">
</div>
</div>
<div class="form-group">
<label for="description" class="col-sm-2 control-label">描述:</label>
<div class="col-sm-10">
<textarea rows="3" cols="2" class="form-control" id="description" placeholder="请输入描述"></textarea>
</div>
</div>
</form>
</div>
</div>
<script>
$(function() {
initFileInput("input-id");
})
function initFileInput(ctrlName) {
var control = $('#' + ctrlName);
control.fileinput({
language : 'zh', //设置语言
uploadUrl : "addScriptJson.do", //上传的地址
allowedFileExtensions : [ 'jpg', 'gif', 'png', 'bat', 'txt' ],//接收的文件后缀
maxFilesNum : 5,//上传最大的文件数量
//uploadExtraData:{"id": 1, "fileName":'123.mp3'},
uploadAsync : true, //默认异步上传
showUpload : true, //是否显示上传按钮
showRemove : true, //显示移除按钮
showPreview : true, //是否显示预览
showCaption : false,//是否显示标题
browseClass : "btn btn-primary", //按钮样式
//dropZoneEnabled: true,//是否显示拖拽区域
//minImageWidth: 50, //图片的最小宽度
//minImageHeight: 50,//图片的最小高度
//maxImageWidth: 1000,//图片的最大宽度
//maxImageHeight: 1000,//图片的最大高度
maxFileSize : 0,//单位为kb，如果为0表示不限制文件大小
//minFileCount: 0,
//maxFileCount: 10, //表示允许同时上传的最大文件个数
enctype : 'multipart/form-data',
validateInitialCount : true,
previewFileIcon : "<i class='glyphicon glyphicon-king'></i>",
msgFilesTooMany : "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
uploadExtraData:function (previewId, index) {
//向后台传递的额外参数
var otherData = getdata();
return otherData;
}
}).on('filepreupload',function(event, data, previewId, index) { //上传中
var form = data.form, files = data.files, extra = data.extra, response = data.response, reader = data.reader;
console.log('文件正在上传');
}).on("fileuploaded",function(event, data, previewId, index) { //一个文件上传成功
console.log('文件上传成功！' + data.id);
}).on('fileerror', function(event, data, msg) { //一个文件上传失败
console.log('文件上传失败！' + data.id);
})
}
function getdata(){
var name = $("#name").val() ;
var description = $("#description").val() ;
var scriptJson = {
"name": name,
"description": description
}
return scriptJson;
}
</script>
</body>
2、后台代码
@Description("新增脚本信息")
@RequestMapping(value = "addScriptJson", method = RequestMethod.POST)
@ResponseBody
public String addScriptJson(@RequestParam MultipartFile file, HttpServletRequest request, HttpServletResponse response) {
String name = request.getParameter("name");
String description = request.getParameter("description");
System.out.println(name);
System.out.println(description);
String filePath = "";// jar包的路径
if (!file.isEmpty()) {
File temp = new File("");
filePath = temp.getAbsolutePath() + "\\" + file.getOriginalFilename();
BufferedOutputStream out;
try {
out = new BufferedOutputStream(new FileOutputStream(new File(filePath)));
out.write(file.getBytes());
out.flush();
out.close();
} catch (FileNotFoundException e) {
e.printStackTrace();
} catch (IOException ex) {
ex.printStackTrace();
}
}
AjaxJson ajaxJson = new AjaxJson();
try {
// 这里处理业务逻辑
} catch (Exception e) {
ajaxJson.setSuccess(false);
ajaxJson.setMsg(e.getMessage());
e.printStackTrace();
}
return ajaxJson.getJsonStr();
}
bootstrap fileinput上传文件的更多相关文章
- bootstrap fileinput 上传文件
最近用到文件上传功能, 说实话:以前遇到过一次,COPY了别人的代码 结束! 这次又要用,可是看到别人很酷的文件上传功能,心痒了! 好吧.简单的办法,找控件: bootstrap fileinput ...
- .net core版 文件上传/ 支持批量上传，拖拽以及预览，bootstrap fileinput上传文件
asp.net mvc请移步 mvc文件上传支持批量上传,拖拽以及预览,文件内容校验 本篇内容主要解决.net core中文件上传的问题 开发环境:ubuntu+vscode 1.导入所需要的包:n ...
- Bootstrap FileInput 上传 中文 API 整理
Bootstrap FileInput 上传 中文 API 整理 上传插件有很多 但是公司用的就是 Bootstrap FileInput 自己就看了看 会用就行 自己都不知道每个值是干嘛用的就问 ...
- 使用bootstrap创建上传文件
1.导入样式,注意顺序 <!-- bootstrap样式 --> <link rel="stylesheet" href="/static/bootst ...
- bootstrap改变上传文件按钮样式，并显示已上传文件名
参考博文: html中,文件上传时使用的<input type="file">的样式自定义 html中<input type="file"&g ...
- 关于Bootstrap fileinput 上传新文件，移除时触发服务器同步删除的配置
在Bootstrap fileinput中移除预览文件时可以通过配置initialPreviewConfig: [ { url:'deletefile',key:fileid } ] 来同步删除服务器 ...
- bootstrap fileinput上传返回400，404，500 等错误替换
$(".uploadfile").on('filebatchuploaderror', function(event, data, msg) { $(".file-err ...
- 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)
首先需要导入一些js和css文件 ? 1 2 3 4 5 6 <link href="__PUBLIC__/CSS/bootstrap.css" rel="exte ...
- 【Bootstrap】bootstrap-fileinput上传文件插件
[bootstrap-fileinput] 这是个据传最好用的bootstrap相关联的文件上传控件,支持拖曳上传,多线程上传,上传文件预览等等功能. 首先还是说一下要引入的一些文件: <lin ...
随机推荐
- python笔记-02
Python基础知识 —————————————— A,B,先把A乘以3,然后加上B,最后在加上列表A A = [1, 2, 3, 4, 5, 6] 赋值 B = [1, 2, 3] 变量 定义一个变 ...
- yolo系列阅读笔记（v1-v3）
yolov1 模型输出的概率建模 图片首先被分割为S*S的网格(grid cell).如果一个bbox的中心落在一个网格里,则该网格负责检测该物体.(对于pascal数据集,S定为7) 每个网格预测B ...
- sort函数的用法(C++排序库函数的调用)
对数组进行排序,在c++中有库函数帮我们实现,这们就不需要我们自己来编程进行排序了. (一)为什么要用c++标准库里的排序函数 Sort()函数是c++一种排序方法之一,学会了这种方法也打消我学习c+ ...
- 如何把U盘的两个盘或者多个盘合成一个
1.插入U盘,导出所有重要数据. 2.右击我的电脑,点管理打开设备管理器. 3.在设备管理器里找到磁盘管理. 4.在磁盘管理右侧出现下图: 5.如图是windows 7的界面. 6.找到U盘,图上是磁 ...
- 题解【洛谷P1379】八数码难题
题面 典型的\(\text{BFS}\). 双向广搜是一种对\(\text{BFS}\)的优化,它适用于起点和终点都明确的题目. 这里给出我的双向广搜模板. inline int bfs()//双向广 ...
- Supervision meeting notes 2019/11/29
topic 分支: 1. subgraph/subsequence mining Wang Jin, routine behavior/ motif. Philippe Fournier Viger ...
- css+div上下左右自适应居中
主要记录自己日常积累的布局相关的东西,持续更新中. 1.登录框上下左右自适应居中 以前想要把登录表单始终放置在页面的中间,花了不少心思,一直以来用的解决方法都是用js,感觉有点麻烦不是很好,于是在网上 ...
- 在多租户（容器）数据库中如何创建PDB：方法3 克隆远程PDB
基于版本:19c (12.2.0.3) AskScuti 创建方法:克隆远程PDB(从非当前CDB中进行远程克隆).将 CDB2 中的 ERP1 远程克隆为 CDB1 中的 PDB6 对应路径:Cre ...
- 174. 地下城游戏（逆向DP）
Q: 一些恶魔抓住了公主(P)并将她关在了地下城的右下角.地下城是由 M x N 个房间组成的二维网格.我们英勇的骑士(K)最初被安置在左上角的房间里,他必须穿过地下城并通过对抗恶魔来拯救公主. 骑士 ...
- asp.net使用wsdl文件调用接口，以及调用SSL接口报错“根据验证过程 远程证书无效”的处理
1.调用wsdl接口,首先需要将wsdl文件转换为cs文件: 进入VS 开发人员命令提示行,输入如下命令: c:/Program Files/Microsoft Visual Studio 8/VC& ...