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 相关文章推荐
Ajax::prototype 源码解读
Jan 22 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
Mar 06 Javascript
jQuery实现流动虚线框的方法
Jan 29 Javascript
Node.js 异步编程之 Callback介绍(一)
Mar 30 Javascript
使用JavaScript实现旋转的彩圈特效
Jun 23 Javascript
关于function类中定义变量this的简单说明
May 28 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
Jun 25 Javascript
基于jQuery实现表格的排序
Dec 02 Javascript
vue按需加载实例详解
Sep 06 Javascript
解决VUEX的mapState/...mapState等取值问题
Jul 24 Javascript
通过滑动翻页效果实现和移动端click事件问题
Jan 26 Javascript
element多个表单校验的实现
May 27 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
全国FM电台频率大全 - 2 天津市
2020/03/11 无线电
php 中include()与require()的对比
2006/10/09 PHP
PHP 中 DOMDocument保存xml时中文出现乱码问题的解决方案
2016/09/19 PHP
PHP 7安装使用体验之性能大提升,兼容性强,扩展支持不够(升级PHP要谨慎)
2017/07/27 PHP
php post json参数的传递和接收处理方法
2018/05/31 PHP
Javascript string 扩展库代码
2010/04/09 Javascript
解析jquery获取父窗口的元素
2013/06/26 Javascript
Extjs NumberField后面加单位实现思路
2013/07/30 Javascript
js确认删除对话框效果的示例代码
2014/02/20 Javascript
jquery单行文字向上滚动效果示例
2014/03/06 Javascript
5款JavaScript代码压缩工具推荐
2014/07/07 Javascript
JavaScript实现的encode64加密算法实例分析
2015/04/15 Javascript
JavaScript对象创建模式实例汇总
2016/10/03 Javascript
jQuery为DOM动态追加事件的方法
2017/02/16 Javascript
vue用addRoutes实现动态路由的示例
2017/09/15 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
2019/03/05 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
2019/03/07 Javascript
ES6基础之 Promise 对象用法实例详解
2019/08/22 Javascript
[13:56]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第一场
2018/04/06 DOTA
剖析Django中模版标签的解析与参数传递
2015/07/21 Python
Python操作MySQL数据库9个实用实例
2015/12/11 Python
python实现词法分析器
2019/01/31 Python
浅谈keras的深度模型训练过程及结果记录方式
2020/01/24 Python
在 Python 中接管键盘中断信号的实现方法
2020/02/04 Python
Python 序列化和反序列化库 MarshMallow 的用法实例代码
2020/02/25 Python
python对接ihuyi实现短信验证码发送
2020/05/10 Python
python tkiner实现 一个小小的图片翻页功能的示例代码
2020/06/24 Python
Python Pygame实现俄罗斯方块
2021/02/19 Python
加拿大在线旅游公司:Flighthub
2019/03/11 全球购物
会计自我鉴定范文
2013/10/06 职场文书
班组长工作职责
2013/12/25 职场文书
《守株待兔》教学反思
2014/03/01 职场文书
企业总经理助理岗位职责
2014/09/12 职场文书
为什么RedisCluster设计成16384个槽
2021/09/25 Redis
详解flex:1什么意思
2022/07/23 HTML / CSS
ubuntu如何搭建vsftpd服务器
2022/12/24 Servers