本篇介绍如何使用bootstrap fileinput.js（最好用的文件上传组件）来进行图片的展示，上传

一、demo

二、插件引入

<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}"/>

1. type=file和class=projectfile，指明其为input file类型。
2. name指定其在后台的获取key。
3. 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);
 }
});

1. 通过jquery获取对应的input file，然后执行fileinput方法。
2. showUpload 设置是否有上传按钮。
3. language指定汉化
4. allowedFileTypes 、allowedFileExtensions 不知道为什么没有起到效果？
5. maxFileSize 指定上传文件大小

五、带file文件的form表单通过ajax提交

我们先来看带file的form表单布局。

<form class="form-horizontal required-validate" action="${ctx}/save?callbackType=confirmTimeoutForward" enctype="multipart/form-data" method="post" onsubmit="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> 

1. enctype=”multipart/form-data”必不可少。
2. onsubmit=”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。

-END-