Bootstrap的fileinput插件实现多文件上传的方法


Posted in Javascript onSeptember 05, 2016

*1.bootstrap-fileinput 插件git下载地址

https://github.com/kartik-v/bootstrap-fileinput.git

2.解决使用bootstrap-fileinput得到返回值

上传图片

$("#file-0a").fileinput({
uploadUrl : "/upload_img",//上传图片的url
allowedFileExtensions : [ 'jpg', 'png', 'gif' ],
overwriteInitial : false,
maxFileSize : 1000,//上传文件最大的尺寸
maxFilesNum : 1,//上传最大的文件数量
initialCaption: "请上传商家logo",//文本框初始话value
//allowedFileTypes: ['image', 'video', 'flash'],
slugCallback : function(filename) {
return filename.replace('(', '_').replace(']', '_');
}
});

注意上传图片事件完之后,得到返回值写法

$('#file-0a').on('fileuploaded', function(event, data, previewId, index) {
var form = data.form, files = data.files, extra = data.extra,
response = data.response, reader = data.reader;
console.log(response);//打印出返回的json
console.log(response.paths);//打印出路径
});

jsp页面

<input id="file-0a" class="file" type="file" multiple
data-min-file-count="1" name="upload_logo">

其中data-min-file-count=”1”是指文件上传最低数量

3.服务端代码

采用了spring自带插件上传,框架为Springmvc

Bean

import java.util.List;
public class Picture {
private List<String> paths;
public List<String> getPaths()
{
return paths;
}
public void setPaths(List<String> paths)
{
this.paths = paths;
} 
}

Controller

@ResponseBody
@RequestMapping(value="upload_img",method=RequestMethod.POST)
public Picture uploadImage(@RequestParam MultipartFile[] upload_logo) throws IOException{
log.info("上传图片");
Picture pic = new Picture();
List<String> paths = new ArrayList<String>();
String dir = UploadUtil.getFolder();
for(MultipartFile myfile : upload_logo){ 
if(myfile.isEmpty()){ 
log.info("文件未上传"); 
}else{ 
log.info("文件长度: " + myfile.getSize()); 
log.info("文件类型: " + myfile.getContentType()); 
log.info("文件名称: " + myfile.getName()); 
log.info("文件原名: " + myfile.getOriginalFilename()); 
log.info("========================================");
//上传文件 返回路径
String path = UploadUtil.writeFile(myfile.getOriginalFilename(), dir, myfile.getInputStream());
log.info("文件路径:"+path);
paths.add(path);
} 
} 
pic.setPaths(paths);
return pic;
}

uploadUtil

private static final Logger log = LoggerFactory.getLogger(UploadUtil.class);
private UploadUtil() {
}
private static SimpleDateFormat fullSdf = new SimpleDateFormat("yyyyMMddHHmmssSSS");
private static SimpleDateFormat folder = new SimpleDateFormat(
"yyyy" + File.separator + "MM" + File.separator + "dd");
/**
* 返回yyyy File.separator MM File.separator dd格式的字符串
* 
* @return
*/
public static String getFolder() {
return folder.format(new Date());
}
/**
* 文件上传
* 
* @param srcName
* 原文件名
* @param dirName
* 目录名
* @param input
* 要保存的输入流
* @return 返回要保存到数据库中的路径
*/
public static String writeFile(String srcName, String dirName, InputStream input) throws IOException {
log.info(srcName);
// 取出上传的目录,此目录是tomcat的server.xml中配置的虚拟目录
String uploadDir = ContextUtil.getSysProp("upload_dir");//设置你上传路径
// 取出虚拟目录的访问路径
String virtualDir = ContextUtil.getSysProp("virtual_dir");//设置你虚拟目录访问路径
// 重命名文件
if (null != srcName) {
srcName = srcName.substring(srcName.indexOf("."));
} else {
srcName = ".jpg";
}
String filename = "";
// 得到要上传的文件路径
filename = uploadDir + File.separator + dirName + File.separator + fullSdf.format(new Date()) + srcName;
// 得到将要保存到数据中的路径
String savePath = filename.replace(uploadDir, "");
savePath = virtualDir + savePath.replace("\\", "/");
File file = new File(filename);
if (!file.getParentFile().exists()) {
file.getParentFile().mkdirs();
}
FileOutputStream fos = new FileOutputStream(file);
// 一次30kb
byte[] readBuff = new byte[1024 * 30];
int count = -1;
while ((count = input.read(readBuff, 0, readBuff.length)) != -1) {
fos.write(readBuff, 0, count);
}
fos.flush();
fos.close();
input.close();
return savePath;
}

4.解决上传时候遇到的一些问题

如遇见点击上传之后,进度条显示为100%,jsp页面显示[Object,obejct],那么注意你后台返回的是否为json对象。

以上所述是小编给大家介绍的Bootstrap的fileinput插件实现多文件上传的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript Onunload与Onbeforeunload使用小结
Dec 31 Javascript
JQuery表单验证插件EasyValidator用法分析
Nov 15 Javascript
使用Node.js配合Nginx实现高负载网络
Jun 28 Javascript
跟我学习javascript的异步脚本加载
Nov 20 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
Mar 21 Javascript
Bootstrap零基础入门教程(二)
Jul 18 Javascript
Javascript动画效果(3)
Oct 11 Javascript
详解Vue监听数据变化原理
Mar 08 Javascript
js实现延迟加载的几种方法
Apr 24 Javascript
js传递数组参数到后台controller的方法
Mar 29 Javascript
element ui table 增加筛选的方法示例
Nov 02 Javascript
Vue响应式原理Observer、Dep、Watcher理解
Jun 06 Javascript
jQuery树形插件jquery.simpleTree.js用法分析
Sep 05 #Javascript
AngularJS实现单独作用域内的数据操作
Sep 05 #Javascript
Vue.js每天必学之Class与样式绑定
Sep 05 #Javascript
BootStrap使用file-input插件上传图片的方法
Sep 05 #Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
Sep 05 #Javascript
Bootstrap使用基础教程详解
Sep 05 #Javascript
chrome浏览器如何断点调试异步加载的JS
Sep 05 #Javascript
You might like
《魔兽世界》惊魂幻象将获得调整
2020/03/08 其他游戏
基于php在各种web服务器的运行模式详解
2013/06/03 PHP
php实现水仙花数示例分享
2014/04/03 PHP
PHP实现仿百度文库,豆丁在线文档效果(word,excel,ppt转flash)
2016/03/10 PHP
基于yaf框架和uploadify插件,做的一个导入excel文件,查看并保存数据的功能
2017/01/24 PHP
PHP 获取 ping 时间的实现方法
2017/09/29 PHP
thinkphp5.1 框架钩子和行为用法实例分析
2020/05/25 PHP
createTextRange()的使用示例含文本框选中部分文字内容
2014/02/24 Javascript
Area 区域实现post提交数据的js写法
2014/04/22 Javascript
js时间日期格式化封装函数
2014/12/02 Javascript
jQuery实现的多屏图像图层切换效果实例
2015/05/07 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
2015/11/21 Javascript
前端设计师们最常用的JS代码汇总
2016/09/25 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
2017/02/22 Javascript
详解前端路由实现与react-router使用姿势
2017/08/07 Javascript
JS实现的集合去重,交集,并集,差集功能示例
2018/03/13 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
2018/10/14 Javascript
vue-cli3环境变量与分环境打包的方法示例
2019/02/18 Javascript
了解javascript中的Dom操作
2019/05/27 Javascript
layui数据表格 table.render 报错的解决方法
2019/09/29 Javascript
原生JS与JQ获取元素的区别详解
2020/02/13 Javascript
python实现简单的TCP代理服务器
2014/10/08 Python
python用for循环求和的方法总结
2019/07/08 Python
Python 实现try重新执行
2019/12/21 Python
以SQLite和PySqlite为例来学习Python DB API
2020/02/05 Python
python自动点赞功能的实现思路
2020/02/26 Python
python中return不返回值的问题解析
2020/07/22 Python
Python return语句如何实现结果返回调用
2020/10/15 Python
基于Python的身份证验证识别和数据处理详解
2020/11/14 Python
CSS中垂直居中的简单实现方法
2015/07/06 HTML / CSS
关于运动会的口号
2014/06/07 职场文书
三八妇女节超市活动方案
2014/08/18 职场文书
小学生民族团结演讲稿
2014/08/27 职场文书
教师节横幅标语
2014/10/08 职场文书
新员工试用期工作总结2015
2015/05/28 职场文书
基于Python实现股票收益率分析
2022/04/02 Python