jsp点击按钮显示进度条bootstrap Fileinput插件的应用实例

如何利用FileInput

利用时的样式

利用FileInput只须要将干系的js，css下载引用即可，相信昔时夜家碰着这个问题的时候已经有了bootstrap开拓的知识，这些根本已经不成问题

jsp点击按钮显示进度条bootstrap Fileinput插件的应用实例 PHP

选择文件后的样式，如果配置妥当的话，点击上传按钮进度条将会读满并显示Done

前台代码，这里有一个小小的问题 form表单的enctype属性

表单中enctype=\"大众multipart/form-data\"大众的意思，是设置表单的MIME编码。
默认情形，这个编码格式是application/x-www-form-urlencoded，不能用于文件上传；只有利用了multipart/form-data，才能完全的通报文件数据，进行下面的操作.但是我们不须要配置，否则会涌现form表单提交其他数据的问题

[html] view plain copy

<div class=\公众line line-dashed line-lg pull-in\公众></div> <div class=\"大众form-group\"大众> <label class=\"大众col-sm-3 control-label\"大众>照片</label> <div class=\"大众col-sm-9\"大众> <input id=\"大众JSh_ZhP\公众 type=\公众file\公众 class=\"大众file\公众 name=\"大众file\公众> <input type=\公众hidden\"大众 id=\"大众JSh_ZhP_Path\公众 name=\公众tbllecturer.JSh_ZhP\公众/> <p class=\"大众help-block\"大众>支持jpg、jpeg、png、gif格式，大小不超过2.0M</p> </div>

接下来就说说如何配置相应的js

默认的fileinput.js该当有一个页面加载完毕的动作，我们打开fileinput.js，果真有相应的方法。

[javascript] view plain copy

$(document).ready(function () { var $input = $('input.file[type=file]'); if ($input.length) { $input.fileinput(); }<span style=\"大众font-family:Arial, Helvetica, sans-serif;\"大众> });</span>

接下来将它注释掉，我们自己写初始化方法，在fileinput,js里添加initFileInput方法，并自己完成加载时的方法，文件上传的一样平常逻辑该当是点击文件上传，将文件在后台做相应的处理后将存储的Url返回添加到form表单中，跟随form表单一起提交到数据库中。
.on（）方法为fileInput上传文件后的回调方法，之后对返回的数据处理即可。

[javascript] view plain copy

后台处理的代码，我直接将文件存在了本地并将路径返回。

[java] view plain copy

@ResponseBody @RequestMapping(\"大众picture/upLoad\"大众) public String upLoad(@RequestParam(\公众file\"大众)CommonsMultipartFile file) throws Exception{ String path=\"大众E:/images/\"大众+new Date().getTime()+file.getOriginalFilename(); File newFile = new File(path); file.transferTo(newFile); Map<String, String> map = new HashMap<String, String>(); map.put(\"大众pathUrl\"大众, path); JSONArray json = JSONArray.fromObject(map); return path; }

到这里大家该当学会了fileinput的利用，如有问题请留言