bootstrap文件上传fileupload插件
Bootstrap FileInput中文API整理：https://blog.csdn.net/u012526194/article/details/69937741
SpringMVC + bootstrap fileupload 多文件上传：https://blog.csdn.net/fanxiangru999/article/details/61927385
bootstrap fileupload 使用详解：https://blog.csdn.net/fanxiangru999/article/details/63756730
源码以及API地址：
bootstrap-fileinput源码：https://github.com/kartik-v/bootstrap-fileinput
bootstrap-fileinput在线API：http://plugins.krajee.com/file-input
bootstrap-fileinput Demo展示：http://plugins.krajee.com/file-basic-usage-demo
前后端单文件上传代码：
@ResponseBody
@RequestMapping(value="/upload", method = RequestMethod.POST)
public JSONObject upload(@RequestParam("file") MultipartFile file, HttpServletRequest request ) {
System.out.println("上传开始");
JSONObject json = new JSONObject();
json.put("code", "1");
if( file.isEmpty() ) {
json.put("msg", "上传文件为空");
return json;
}else {
String savePath = request.getServletContext().getRealPath("/upload/");
String fileName=file.getOriginalFilename();
String pathname = savePath + fileName;
File dest = new File(pathname);
if( !dest.getParentFile().exists() ) {
dest.getParentFile().mkdirs();
}
try {
file.transferTo(dest);
json.put("code", 1);
json.put("msg", "上传成功");
json.put("imgPath", pathname);
return json;
} catch (Exception e) {
json.put("msg", e.getMessage());
return json;
}
}
}
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html>
<!-- release v4.1.8, copyright 2014 - 2015 Kartik Visweswaran -->
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>上传文件测试</title>
<link href="<%=basePath%>css/bootstrap.min.css" rel="stylesheet">
<link href="<%=basePath%>css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="<%=basePath%>js/jquery-3.2.1.min.js"></script>
<script src="<%=basePath%>js/fileinput.min.js" type="text/javascript"></script>
<script src="<%=basePath%>js/fileinput_locale_zh.js" type="text/javascript"></script>
<script src="<%=basePath%>js/bootstrap.min.js" type="text/javascript"></script>
</head> <body>
<div class="container">
<div class="row" style="height: 500px">
<input id="file-0" class="file" type="file" multiple data-min-file-count="1" name="file">
</div>
</div> <script type="text/javascript">
//初始化fileinput控件（第一次初始化）
function initFileInput(ctrlName, uploadUrl) {
var control = $('#' + ctrlName);
control.fileinput({
language: 'zh', //设置语言
uploadUrl: uploadUrl, //上传的地址
allowedFileExtensions : ['jpg', 'png','gif'],//接收的文件后缀
showUpload: true, //是否显示上传按钮
showCaption: false,//是否显示标题
browseClass: "btn btn-primary", //按钮样式
previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
});
}
//初始化fileinput控件（第一次初始化）
initFileInput("file-0", "/upload");
</script>
</body>
</html>
bootstrap文件上传fileupload插件的更多相关文章
- 基于Metronic的Bootstrap开发框架经验总结（5）--Bootstrap文件上传插件File Input的使用
Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadi ...
- Bootstrap文件上传插件File Input的使用
基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用 Bootstrap文件上传插件File Input是一个不错的文件上传控件, ...
- （转）基于Metronic的Bootstrap开发框架经验总结（5）--Bootstrap文件上传插件File Input的使用
http://www.cnblogs.com/wuhuacong/p/4774396.html Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使 ...
- JS组件系列——Bootstrap文件上传组件：bootstrap fileinput
前言:之前的三篇介绍了下bootstrap table的一些常见用法,发现博主对这种扁平化的风格有点着迷了.前两天做一个excel导入的功能,前端使用原始的input type='file'这种标签, ...
- Bootstrap文件上传组件
前言:之前的三篇介绍了下bootstrap table的一些常见用法,发现博主对这种扁平化的风格有点着迷了.前两天做一个excel导入的功能,前端使用原始的input type='file'这种标签, ...
- Bootstrap 文件上传插件 FileInput的使用问题
: 在使用bootstrap的文件上传插件fileinput http://plugins.krajee.com/file-input的预览功能时,删除预览图片在 bootstrap 模态框中没有用, ...
- Bootstrap文件上传组件：bootstrap fileinput
为了上传预览pdf与图片特用此插件. 源码以及API地址: bootstrap-fileinput源码:https://github.com/kartik-v/bootstrap-fileinput ...
- python 全栈开发，Day75(Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件)
昨日内容回顾 基于对象的跨表查询 正向查询:关联属性在A表中,所以A对象找关联B表数据,正向查询 反向查询:关联属性在A表中,所以B对象找A对象,反向查询 一对多: 按字段:xx book ----- ...
- Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件
一.Django与Ajax AJAX准备知识:JSON 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻 ...
随机推荐
- Web安全工程师（进阶）课程表
01-SQL注入漏洞原理与利用 预备知识: 了解HTTP协议,了解常见的数据库.脚本语言.中间件.具备基本的编程语言基础. 授课大纲: 第一章:SQL注入基础 1.1 Web应用架构分析1.2 SQL ...
- Kibana问题搜集---下载源码，执行npm install 报错
npm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! chromedriver@2.34.0 install: `node install.js`npm E ...
- P5021 赛道修建 (NOIP2018)
传送门 考场上把暴力都打满了,结果文件输入输出写错了.... 当时时间很充裕,如果认真想想正解是可以想出来的.. 问你 长度最小的赛道长度的最大值 显然二分答案 考虑如何判断是否可行 显然对于一个节点 ...
- POJ 3686 *最小费用流-转化成普通指派问题）
题意] 有N个订单和M个机器,给出第i个订单在第j个机器完成的时间Mij,每台机器同一时刻只能处理一个订单,机器必须完整地完成一个订单后才能接着完成下一个订单.问N个订单完成时间的平均值最少为多少. ...
- U盘中病毒了
往U盘里拷东西的时候突然发现一个后缀名为exe图标却是文件夹的图标的文件.大概二三百K 按类型排序之后发现好几个这样的文件,大小都是一模一样的,名字分别跟我U盘里原先的文件夹对应,原本的文件夹都被设置 ...
- matlab的一些关于块分类的函数~~~
1. nlfilter(General sliding-neighborhood operations) B = nlfilter(A, [m n], fun),这是一个其中A是图像[m n]是图像 ...
- Launch iCar Scan Android Scanner Support Bluetooth X431 iDiag Update Version
Autonumen.com release new Launch iCar Scan for Android,Launch iCarScan Bluetooth Scanner is update v ...
- 工作ui（2）
做完整个小Demo整理的一些方法和踩过的miniUI的坑,分享出来希望大家批评指正,共同进步. 1.动态创建列:尽量不要直接在html文件里创建列,动态设置在js文件里方面添加.修改等. 首先把列定义 ...
- robotframework使用过程中遇到的一些问题
问题1: 在ride上import library,显示红色解决办法:根据菜单栏tools--view ride log提示依次安装缺少的模块,包括natsort.xlrd.xlwd.xlutils, ...
- VIM操作手札
查看帮助手册 [Vim 中文帮助文档] 常用命令及说明 在命令模式下编辑 命令 说明 Ctrl+u 向文件首翻半屏 Ctrl+d 向文件尾翻半屏 Ctrl+f 向文件尾翻一屏 Ctrl+b 向文件首翻 ...