Bootstrap File Input,最好用的文件上传组件(1)-阿里云开发者社区

开发者社区> 沉默王二> 正文

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

简介: Bootstrap File Input,最好用的文件上传组件
+关注继续查看

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


一、先来看效果图吧


image.png





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


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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
关于FileZilla上传文件后服务器端文件与本地文件大小不一致的解决方法
最近在调试网站时发现,通过ftp上传工具FileZilla上传至服务器端的文件与本地文件大小不一致,虽然没有影响网站的最终显示效果,但仍让我困惑不解。后发现是传输类型的原因,解决方法如下: 中文版FileZilla菜单栏->传输->传输类型->二进制(Binary) 造成大小不一致的原因:ASCII模式和二进制(Binary)模式的区别是回车换行的处理,Binary模式不对数据进行任何处理,ASCII模式将回车换行转换为本机的回车字符,比如:UNIX下是\n,Windows下是\r\n,Mac下是\r。
1483 0
对象存储OSS如何通过PutObject上传文件?
迁移OSS的文件,就是将用户其他数据源的文件迁移至OSS。接下来几篇文章将介绍的方法是以下四种:一、通过API/SDK上传文件;二、通过API/SDK拷贝文件;三、通过oss-import工具迁移文件;四、通过云市场服务迁移文件。
7649 0
与文件上传到的三个类:FileItem类、ServletFileUpload 类、DiskFileItemFactory类
文件上传: ServletFileUpload负责处理上传的文件数据,并将表单中每个输入项封装成一个FileItem对象中, 在使用ServletFileUpload对象解析请求时需要根据DiskFileItemFactory对象的属性sizeThreshold(临界值)和repository(临时目录)来决定将解析得到的数据保存在内存还是临时文件中,如果是临时文件,保存在哪个临时目录中?。
973 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
12070 0
第6周-任务5-多文件组织三角形类
【题目】将任务4(第6周-任务4-用点类作成员的三角形类)中的的解决用一个项目多个文件的方式实现,其中两个类的声明放在一个.h文件中,每个类的成员函数分别放一个文件,main()函数用一个文件。体会这样安排的优点。 【要点】对多个文件一个项目的组织方法的一般原则是:(1)若干个功能相近的类的声明放在一个头文件中;(2)每个类的成员函数分别放在一个.cpp文件中;(3)如果有main(
894 0
+关注
沉默王二
微信搜索「沉默王二」,回复关键字「00」获取硬核计算机基础资料。
1084
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载