最好用的Bootstrap fileinput.js文件上传组件

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);
 }
});

<form class="form-horizontal required-validate" action="${ctx}/save" 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> 

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;
 });
 }
 }
}

 $(this).fileinput({
 showUpload : false,
 showRemove : false,
 language : 'zh',
 allowedPreviewTypes: ['image'],
 allowedFileTypes: ['image'],
 allowedFileExtensions: ['jpg', 'png'],
 maxFileSize : 2000,

 });

 var node = ctr + i, previewId = previewInitId + "-" + node, isText, file = files[i],
  caption = self.slug(file.name), fileSize = (file.size || 0) / 1000, checkFile, fileExtExpr = '',
  previewData = objUrl.createObjectURL(file), fileCount = 0, j, msg, typ, chk,
  fileTypes = self.allowedFileTypes, strTypes = isEmpty(fileTypes) "htmlcode">

 if (!isEmpty(fileTypes) && isArray(fileTypes)) {
     for (j = 0; j < fileTypes.length; j += 1) {
      typ = fileTypes[j];
      checkFile = settings[typ];
      chk = (checkFile !== undefined && checkFile(file.type, caption));
      fileCount += isEmpty(chk) "htmlcode">

 defaultFileTypeSettings = {
  image: function (vType, vName) {
   return (vType !== undefined) "color: #800000">③、allowedFileExtensions什么时候起作用

上节我们讨论完“allowedFileTypes”，捎带说了“allowedFileExtensions”，那么如何让后缀进行check呢？      


 $(this).fileinput({
    showUpload : false,
    showRemove : false,
    language : 'zh',
    allowedPreviewTypes: ['image'],
    allowedFileExtensions: ['jpg', 'png'],
    maxFileSize : 2000,

   });




fileinput组件此时指定的属性如上，没有了“allowedFileTypes”，并且指定允许的后缀类型为“[‘jpg', ‘png']”，也就是说，假如我们选择了gif的图片就会出现错误提示。 



错误预期的发生了，那么请特别注意：


image: function (vType, vName) {
   return (vType !== undefined) "htmlcode">

image: function (vType, vName) {
   return (vType !== undefined) ? vType.match('image.*') : vName.match(/\.(gif|png|jpe?g)$/i);
  },



image类型的后缀当然默认包含了gif，我只是为了举例说明，代码做了调整，请注意！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

            
            上一篇：JS+Canvas实现的俄罗斯方块游戏完整实例

            下一篇：jQuery Ajax File Upload实例源码