给大家分享一个FileInput的使用实例，也是自己开发中遇到的问题
如何使用FileInput
使用时的样式
使用FileInput只需要将相关的js，css下载引用即可，相信当大家遇到这个问题的时候已经有了bootstrap开发的知识，这些基础已经不成问题
选择文件后的样式，如果配置妥当的话，点击上传按钮进度条将会读满并显示Done
前台代码，这里有一个小小的问题 form表单的enctype属性
表单中enctype="multipart/form-data"的意思，是设置表单的MIME编码。默认情况，这个编码格式是application/x-www-form-urlencoded，不能用于文件上传；只有使用了multipart/form-data，才能完整的传递文件数据，进行下面的操作.
但是我们不需要配置，否则会出现form表单提交其他数据的问题
[html] view plain copy
class="help-block">支持jpg、jpeg、png、gif格式，大小不超过2.0M
接下来就说说如何配置相应的js
默认的fileinput.js应该有一个页面加载完毕的动作，我们打开fileinput.js，果然有相应的方法。
[javascript] view plain copy
$(document).ready(function () { var接下来将它注释掉，我们自己写初始化方法，在fileinput,js里添加initFileInput方法，并自己完成加载时的方法，文件上传的一般逻辑应该是点击文件上传，将文件在后台做相应的处理后将存储的Url返回添加到form表单中，跟随form表单一起提交到数据库中。.on（）方法为fileInput上传文件后的回调方法，之后对返回的数据处理即可。
[javascript] view plain copy
function initFileInput(ctrlName,uploadUrl) { var control = $('#' + ctrlName); control.fileinput({ language: 'zh', //设置语言 uploadUrl: uploadUrl, showUpload: true, //是否显示上传按钮 showRemove:true, showPreview : true, dropZoneEnabled: false, showCaption: true,//是否显示标题 allowedPreviewTypes: ['image'], allowedFileTypes: ['image'], allowedFileExtensions: ['jpg', 'png', 'gif'], maxFileSize : 2000, maxFileCount: 1, //initialPreview: [ //预览图片的设置 // "后台处理的代码，我直接将文件存在了本地并将路径返回。
[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> map = new HashMap<string>(); /<string>/<string> map.put("pathUrl", path); JSONArray json = JSONArray.fromObject(map); return path; }到这里大家应该学会了fileinput的使用，如有问题请留言