*1.bootstrap-fileinput 插件git下载地址
https://github.com/kartik-v/bootstrap-fileinput.git
2.解决使用bootstrap-fileinput得到返回值
上传图片
?123456789101112 | $( "#file-0a" ).fileinput({ uploadUrl "/upload_img" , //上传图片的url allowedFileExtensions 'jpg' , 'png' , 'gif'
overwriteInitial false , maxFileSize //上传文件最大的尺寸 maxFilesNum //上传最大的文件数量 initialCaption: "请上传商家logo" , //文本框初始话value //allowedFileTypes: slugCallback function (filename) { return
'(' , '_' ).replace( ']' , '_' ); } }); |
注意上传图片事件完之后,得到返回值写法
?123456 | $( '#file-0a' ).on( 'fileuploaded' , function (event, data, previewId, index) { var
response console.log(response); //打印出返回的json console.log(response.paths); //打印出路径 }); |
jsp页面
?12 | <input "file-0a"
"file"
"file"
data-min-file-count= "1"
"upload_logo" > |
其中data-min-file-count=”1”是指文件上传最低数量
3.服务端代码
采用了spring自带插件上传,框架为Springmvc
Bean
?123456789101112 | import public private public { return
} public { this .paths = paths; } } |
Controller
?12345678910111213141516171819202122232425 | @ResponseBody @RequestMapping(value= "upload_img" ,method=RequestMethod.POST) public log.info( "上传图片" ); Picture new
List<String> new
String 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 log.info( "文件路径:" +path); paths.add(path); } } pic.setPaths(paths); return
} |
uploadUtil
?1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859 | private private } private new
"yyyyMMddHHmmssSSS" ); private new
"yyyy"
"MM"
"dd" ); /** * * * */ public return
new
} /** * * * * * * * * * */ public log.info(srcName); // String "upload_dir" ); //设置你上传路径 // String "virtual_dir" ); //设置你虚拟目录访问路径 // if
null
srcName "." )); } else
srcName ".jpg" ; } String "" ; // filename new
// String "" ); savePath "\\" , "/" ); File new
if
file.getParentFile().mkdirs(); } FileOutputStream new
// byte[] new
int while
fos.write(readBuff, } fos.flush(); fos.close(); input.close(); return
} |
4.解决上传时候遇到的一些问题
如遇见点击上传之后,进度条显示为100%,jsp页面显示[Object,obejct],那么注意你后台返回的是否为json对象。
以上所述是小编给大家介绍的Bootstrap的fileinput插件实现多文件上传的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
原文链接:http://blog.csdn.net/qq_23254453/article/details/51199153