bootstrap Fileinput插件的使用实例

给大家分享一个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

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

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

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

[javascript] view plain copy

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

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

[javascript] view plain copy

1. function initFileInput(ctrlName,uploadUrl) {
2. var control = $('#' + ctrlName);
3. control.fileinput({
4. language: 'zh', //设置语言
5. uploadUrl: uploadUrl,
6. showUpload: true, //是否显示上传按钮
7. showRemove:true,
8. showPreview : true,
9. dropZoneEnabled: false,
10. showCaption: true,//是否显示标题
11. allowedPreviewTypes: ['image'],
12. allowedFileTypes: ['image'],
13. allowedFileExtensions: ['jpg', 'png', 'gif'],
14. maxFileSize : 2000,
15. maxFileCount: 1,
16. //initialPreview: [
17. //预览图片的设置
18. // "<img src='http://127.0.0.1:8080/NewsManageSys/plugin/umeditor1_2_2/jsp/upload/20161030/55061 477813913474.jpg' class='file-preview-image' alt='肖像图片' title='肖像图片'>",
19. //],
21. }) }
22. $(document).ready(function () {
23. var path = rootPath + "/lecturer/picture/upLoad.shtml";
24. initFileInput("JSh_ZhP",path);
25. $("#JSh_ZhP").on("fileuploaded", function (event, data, previewId, index) {
26. $("#JSh_ZhP_Path").val(data.response);
28. });
30. });

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

[java] view plain copy

1. @ResponseBody
2. @RequestMapping("picture/upLoad")
3. public String upLoad(@RequestParam("file")CommonsMultipartFile file)
4. throws Exception{
6. String path="E:/images/"+new Date().getTime()+file.getOriginalFilename();
7. File newFile = new File(path);
8. file.transferTo(newFile);
9. Map<String, String> map = new HashMap<String, String>();
10. map.put("pathUrl", path);
11. JSONArray json = JSONArray.fromObject(map);
12. return path;
13. }

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