Bootstrap File Input，最好用的文件上传组件(1)

2021-08-13 03:50:59

本篇介绍如何使用 Bootstrap File Input（最好用的文件上传组件）来进行图片的展示、上传，以及如何在服务器端进行文件保存。

一、先来看效果图吧

二、引入插件的样式和脚本

http://plugins.krajee.com/file-input,这是其官方文档，里面有下载地址。

三、在页面上添加组件

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。

码农公寓

相关文章