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 中对象的继承〔转贴〕
Jan 22 Javascript
HTML-CSS群中单选引发的“事件”
Mar 05 Javascript
jQuery对象和DOM对象相互转化
Apr 24 Javascript
实现png图片和png背景透明(支持多浏览器)的方法
Sep 08 Javascript
Javascript select下拉框操作常用方法
Nov 09 Javascript
Javascript通过overflow控制列表闭合与展开的方法
May 15 Javascript
js中的内部属性与delete操作符介绍
Aug 10 Javascript
jQuery EasyUI之DataGrid使用实例详解
Jan 04 Javascript
Angular 2应用的8个主要构造块有哪些
Oct 17 Javascript
微信小程序的动画效果详解
Jan 18 Javascript
微信小程序日期时间选择器使用方法
Feb 01 Javascript
基于JavaScript实现轮播图效果
Jan 02 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
为查询结果建立向后/向前按钮
2006/10/09 PHP
PHP中extract()函数的定义和用法
2012/08/17 PHP
PHP5.3新特性小结
2016/02/14 PHP
PHP计算日期相差天数实例分析
2016/02/23 PHP
laravel5使用freetds连接sql server的方法
2018/12/07 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
PHP函数用法详解【初始化、嵌套、内置函数等】
2020/06/02 PHP
ExtJS下grid的一些属性说明
2009/12/13 Javascript
javascript中字符串的定义示例代码
2013/12/19 Javascript
js弹窗返回值详解(window.open方式)
2014/01/11 Javascript
关于js里的this关键字的理解
2015/08/17 Javascript
jQuery插件实现多级联动菜单效果
2015/12/01 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
2016/04/01 Javascript
js实现点击按钮弹出上传文件的窗口
2016/12/23 Javascript
js获取当前周、上一周、下一周日期
2017/03/19 Javascript
详解vue渲染函数render的使用
2017/12/12 Javascript
js阻止默认右键的下拉菜单方法
2018/01/02 Javascript
iview日期控件,双向绑定日期格式的方法
2018/03/15 Javascript
vue和webpack项目构建过程常用的npm命令详解
2018/06/15 Javascript
Node批量爬取头条视频并保存方法
2018/09/20 Javascript
Vue.js中该如何自己维护路由跳转记录
2019/05/19 Javascript
vue实现移动端图片上传功能
2019/12/23 Javascript
python实现web方式logview的方法
2015/08/10 Python
Python存取XML的常见方法实例分析
2017/03/21 Python
详解python中asyncio模块
2018/03/03 Python
Python找出微信上删除你好友的人脚本写法
2018/11/01 Python
python实现opencv+scoket网络实时图传
2020/03/20 Python
Eclipse配置python默认头过程图解
2020/04/26 Python
基于python实现对文件进行切分行
2020/04/26 Python
keras分类模型中的输入数据与标签的维度实例
2020/07/03 Python
澳大利亚领先的内衣店:Bendon Lingerie澳大利亚
2020/05/15 全球购物
J2ee常用的设计模式?说明工厂模式
2015/05/21 面试题
学前教育专业毕业生自荐信
2013/10/03 职场文书
社区学习十八大感想
2014/01/22 职场文书
2015年端午节活动总结
2015/02/11 职场文书
教师学期个人总结
2015/02/11 职场文书