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 相关文章推荐
一个用js实现的页内搜索代码
May 23 Javascript
仿猪八戒网左下角的文字滚动效果
Oct 28 Javascript
js indexOf()定义和用法
Oct 21 Javascript
js弹出框轻量级插件jquery.boxy使用介绍
Jan 15 Javascript
用jquery等比例控制图片宽高的具体实现
Jan 28 Javascript
JavaScript及jquey实现多个数组的合并操作
Sep 06 Javascript
jquery 插件实现多行文本框[textarea]自动高度
Mar 04 Javascript
Highcharts使用简例及异步动态读取数据
Dec 30 Javascript
JS实现汉字与Unicode码相互转换的方法详解
Apr 28 Javascript
JavaScript中递归实现的方法及其区别
Sep 12 Javascript
Vue触发式全局组件构建的方法
Nov 28 Javascript
微信小程序上线发布流程图文详解
May 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
java EJB 加密与解密原理的一个例子
2008/01/11 PHP
PHP实现返回JSON和XML的类分享
2015/01/28 PHP
使用ThinkPHP的自动完成实现无限级分类实例详解
2016/09/02 PHP
javascript与CSS复习(二)
2010/06/29 Javascript
jQuery基本选择器选择元素使用介绍
2013/04/18 Javascript
Jquery在指定DIV加载HTML示例代码
2014/02/17 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
2014/06/26 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
2015/05/09 Javascript
关于foreach循环中遇到的问题小结
2017/05/08 Javascript
基于vue实现swipe分页组件实例
2017/05/25 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
2018/02/08 Javascript
vue中对象数组去重的实现
2020/02/06 Javascript
vue3.0+vue-router+element-plus初实践
2020/12/02 Vue.js
[50:04]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第二局
2016/02/28 DOTA
python基础教程之缩进介绍
2014/08/29 Python
bpython 功能强大的Python shell
2016/02/16 Python
Python3实现爬取指定百度贴吧页面并保存页面数据生成本地文档的方法
2018/04/22 Python
Python中.join()和os.path.join()两个函数的用法详解
2018/06/11 Python
对python3中pathlib库的Path类的使用详解
2018/10/14 Python
对python for 文件指定行读写操作详解
2018/12/29 Python
Python创建一个元素都为0的列表实例
2019/11/28 Python
python在协程中增加任务实例操作
2021/02/28 Python
css3实现冲击波效果的示例代码
2018/01/11 HTML / CSS
全球立体声:World Wide Stereo
2018/09/29 全球购物
小区门卫管理制度
2014/01/29 职场文书
护理学应聘自荐书范文
2014/02/05 职场文书
读书活动总结范文
2014/04/26 职场文书
参赛口号
2014/06/16 职场文书
好人好事演讲稿
2014/09/01 职场文书
解除劳动合同协议书(样本)
2014/10/02 职场文书
2014年行政人事工作总结
2014/12/09 职场文书
先进教育工作者事迹材料
2014/12/23 职场文书
北大自主招生自荐信
2015/03/04 职场文书
小学生暑假生活总结
2015/07/13 职场文书
毕业生的自我鉴定表范文
2019/05/16 职场文书
如何写好活动总结
2019/06/21 职场文书