本篇介绍如何使用 Bootstrap File Input（最好用的文件上传组件）来进行图片的展示、上传，以及如何在服务器端进行文件保存。
一、先来看效果图吧
二、引入插件的样式和脚本
<link type="text/css" rel="stylesheet" href="${ctx}/components/fileinput/css/fileinput.css" />
<script type="text/javascript" src="${ctx}/components/fileinput/js/fileinput.js"></script>
<script type="text/javascript" src="${ctx}/components/fileinput/js/fileinput_locale_zh.js"></script>
http://plugins.krajee.com/file-input,这是其官方文档，里面有下载地址。
三、在页面上添加组件
<input type="file" name="image" class="projectfile" value="${deal.image}"/>
type=file和class=projectfile，指明其为input file类型。
name指定其在后台的获取key。
value指定其在展示的时候图片路径。
四、初始化
projectfileoptions : { showUpload : false, showRemove : false, language : 'zh', allowedPreviewTypes : [ 'image' ], allowedFileExtensions : [ 'jpg', 'png', 'gif' ], maxFileSize : 2000, }, // 文件上传框 $('input[class=projectfile]').each(function() { var imageurl = $(this).attr("value"); if (imageurl) { var op = $.extend({ initialPreview : [ // 预览图片的设置 "<img src='" + imageurl + "' class='file-preview-image'>", ] }, projectfileoptions); $(this).fileinput(op); } else { $(this).fileinput(projectfileoptions); } });
通过jquery获取对应的input file，然后执行fileinput方法。
showUpload 设置是否有上传按钮。
language指定汉化
4. allowedFileTypes 、allowedFileExtensions 不知道为什么没有起到效果？
maxFileSize 指定上传文件大小
五、带file文件的form表单通过ajax提交
我们先来看带file的form表单布局。
<form class="form-horizontal required-validate" action="${ctx}/save?callbackType=confirmTimeoutForward" enctype="multipart/form-data" method="post" οnsubmit="return iframeCallback(this, pageAjaxDone)"> <div class="form-group"> <label for="" class="col-md-1 control-label">项目封面</label> <div class="col-md-10 tl th"> <input type="file" name="image" class="projectfile" value="${deal.image}" /> <p class="help-block">支持jpg、jpeg、png、gif格式，大小不超过2.0M</p> </div> </div> <div class="form-group text-center "> <div class="col-md-10 col-md-offset-1"> <button type="submit" class="btn btn-primary btn-lg">保存</button> </div> </div> </form>
enctype="multipart/form-data"必不可少。
οnsubmit="return iframeCallback(this, pageAjaxDone)"方法，通过ajax提交表单（iframeCallback），并且上传成功后调用回调函数（pageAjaxDone）进行下一步操作。
关于iframeCallback的介绍，请参照 summernote所在form表单的数据提交，这里就不多做介绍了。
然后我们来介绍一下回调函数pageAjaxDone。
function pageAjaxDone(json) { YUNM.debug(json); YUNM.ajaxDone(json); if (json[YUNM.keys.statusCode] == YUNM.statusCode.ok) { var msg = json[YUNM.keys.message]; // 弹出消息提示 YUNM.debug(msg); if (YUNM.callbackType.confirmTimeoutForward == json.callbackType) { $.showSuccessTimeout(msg, function() { window.location = json.forwardUrl; }); } } }
其主要的功能就是通过ajaxDone方法处理服务端传递过来的错误消息，假如说服务端操作成功，那么会显示提示信息，进而跳转到对应的url。
