BootstrapFileInput，最好⽤的⽂件上传组件
本篇介绍如何使⽤ 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>
三、在页⾯上添加组件
<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 不知道为什么没有起到效果？
4. maxFileSize 指定上传⽂件⼤⼩
五、带file⽂件的form表单通过ajax提交
我们先来看带file的form表单布局。
<form class="form-horizontal required-validate" action="${ctx}/save?callbackType=confirmTimeoutFo
rward" 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>
1. enctype="multipart/form-data"必不可少。
2. οnsubmit="return iframeCallback(this, pageAjaxDone)"⽅法，通过ajax提交表单（iframeCallback），并且上传成功后调⽤回
调函数（pageAjaxDone）进⾏下⼀步操作。
关于iframeCallback的介绍，请参照，这⾥就不多做介绍了。
然后我们来介绍⼀下回调函数pageAjaxDone。
function pageAjaxDone(json){
YUNM.debug(json);
YUNM.ajaxDone(json);
if(json[YUNM.keys.statusCode]==YUNM.statusCode.ok){
var msg = json[ssage];
// 弹出消息提⽰
YUNM.debug(msg);
if(firmTimeoutForward == json.callbackType){
$.showSuccessTimeout(msg,function(){
window.location = json.forwardUrl;
});
}
}
}
其主要的功能就是通过ajaxDone⽅法处理服务端传递过来的错误消息，假如说服务端操作成功，那么会显⽰提⽰信息，进⽽跳转到对应的url。
六、服务器端保存图⽚
请参照
ps：以上博客留了⼀个⼩疑问，⼀直没有去研究，直到有位⾮常棒的⼩伙伴 ihchenchen 给了我如下的提醒：
allowedFileTypes 、allowedFileExtensions 我知道为什么没有效果，因为 fileinput() ⽅法调⽤了两次，⼀次在 fileinput.js ⾥⾯最后⼏⾏，还有⼀次就是你⾃⼰写的 $(this).fileinput()。在fileinput.js⾥的是没有设置allowedFileTypes 、allowedFileExtensions 值的。
有两种⽅法可以改：
1、把fileinput.js⾥的最后⼏⾏调⽤注释掉。
2、全部使⽤“data-”的⽅法来做，不写$(this).fileinput()。
对于ihchenchen善意的提醒，我⾮常的感谢，虽然他提供的解释并没有解决我的疑问，但是我很喜欢这样有互动的技术交流，之前写很多博客，基本上很少发⽣这样善意并且⾏之有效的回答。这让我想起，⾥⾯的故事让⼈震撼之余，捎带着些许的惭愧。那么如何做到“Ask questions, get answers, no distractions。”就显得特别珍贵，⽽“ihchenchen”则充满这种精神！
六、解惑allowedFileTypes 、allowedFileExtensions
之前困惑为什么bootstrap fileinput为什么设置了这两个属性后，没有效果，其实是我⾃⼰的误解，如今经过⼀番痛彻的领悟后恍然⼤悟！
①、allowedFileTypes
allowedFileTypes
array the list of allowed file types for upload. This by default is set to null which means the plugin supports all file types for upload. If an invalid file type is found, then a validation error message as set in msgInvalidFileType will be raised.
The following types as set in fileTypeSettings are available for setup.
[‘image’, ‘html’, ‘text’, ‘video’, ‘audio’, ‘flash’, ‘object’]
先从“allowedFileTypes”说起，该属性告知我们⽂件的选择类型，那么我们很容易想到这样的画⾯：
也就是说，我们希望此时的“所有⽂件”处不是“所有⽂件”，⽽是“image”之类的。显然这样的逻辑并没有错，但却不适合bootstrap fileinput！
那么，这个时候我就很容易认为“allowedFileTypes” 没有起到作⽤！
但请看下图：
吼吼，原来是在你选择了⽂件后发⽣的类型检查！
②、allowedFileTypes⼯作原理
$(this).fileinput({
showUpload :false,
showRemove :false,
language :'zh',
allowedPreviewTypes:['image'],
allowedFileTypes:['image'],
allowedFileExtensions:['jpg','png'],
maxFileSize :2000,
});
通过fileinput⽅法我们加载⼀个bootstrap fileinput组件，那么其内部是如何实现allowedFileTypes的呢？
通过在fileinput.js⽂件中搜索“allowedFileTypes”关键字，我们得到如下代码：
var node = ctr + i, previewId = previewInitId +"-"+ node, isText, file = files[i],
caption = self.slug(file.name), fileSize =(file.size ||0)/1000, checkFile, fileExtExpr ='',
previewData = ateObjectURL(file), fileCount =0, j, msg, typ, chk,
fileTypes = self.allowedFileTypes, strTypes =isEmpty(fileTypes)?'': fileTypes.join(', '),
fileExt = self.allowedFileExtensions, strExt =isEmpty(fileExt)?'': fileExt.join(', ');
然后我们继续看到如下的代码：
if(!isEmpty(fileTypes)&&isArray(fileTypes)){
for(j =0; j < fileTypes.length; j +=1){
typ = fileTypes[j];
checkFile = settings[typ];
chk =(checkFile !== undefined &&pe, caption));
fileCount +=isEmpty(chk)?0: chk.length;
}
if(fileCount ===0){
msg = place('{name}', caption).replace('{types}', strTypes);
self.isError =throwError(msg, file, previewId, i);
return;
}
}
我们可以发现，⽂件类型的检查是发⽣在checkFile⽅法上，那么checkFile⽅法到底做了些什么呢？
defaultFileTypeSettings ={
image:function(vType, vName){
return(vType !== undefined)? vType.match('image.*'): vName.match(/\.(png|jpe?g)$/i);
},
.
..
以上就是checkFile的内容。
1. 也就是说当我们指定allowedFileTypes: ['image']，时，就会进⾏image的类型检查。
2. 显然我们选择的txt⽂件不属于image类型，那么就会匹配不上，出现以上界⾯。
3. 同时，该⽅法告诉我们，当不指定allowedFileTypes: ['image'],，只指定allowedFileExtensions: ['jpg', 'png']，就会执⾏vName.match(/\.
(png|jpe?g)$/i)，也就是⽂件后缀类型的检查，这点很关键啊，为我们接下来介绍“allowedFileExtensions”奠定基础。
③、allowedFileExtensions什么时候起作⽤
上节我们讨论完“allowedFileTypes”，捎带说了“allowedFileExtensions”，那么如何让后缀进⾏check呢？
$(this).fileinput({
showUpload :false,
showRemove :false,
language :'zh',
allowedPreviewTypes:['image'],
allowedFileExtensions:['jpg','png'],
maxFileSize :2000,
jquery是什么功能组件});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。