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

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


一、先来看效果图吧


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





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


<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。

上一篇:s3c2410上搭建QT/Embedded4.8.5开发环境(五)--程序安装后的打包,以及环境变量的设置


下一篇:监控网卡流量