用bootstrap file input 上传图片

yunhao 发布于2019-08-26 12:08 / 2866人阅读

项目中经常会遇到文件上传，管理多文件上传过程的需求。
bootstrap file input组件算是不错的解决方案

项目Github地址：https://github.com/kartik-v/b...

除此之外还有一个官方在线文档，提供各种示例：http://plugins.krajee.com/fil...

组件开发多年，功能强大，最简单的集成方式却并不复杂，首先下载源代码：

php composer.phar require kartik-v/bootstrap-fileinput "@dev"

插件兼容bootstrap3/4
引入相关文件：

最简单的初始化代码如下：


$("#input-id").fileinput();

但要完成一个基本可用的状态，还需要增加以下配置项：

$("#cover").fileinput({
    language: "zh",
    showCaption: false, // 不显示本地文件名
    allowedFileTypes: ["image"], // 只允许上传图片
    allowedFileExtensions: ["jpg", "jpeg", "png", "gif"], 
    uploadUrl: "{{ url("uploads/image") }}" //上传图片的服务器地址
}).on("fileuploaded", function(event, data, previewId, index){
    var response = data.response;
    $("input#coverUploader").attr("required", false);
    var input = $("");
    input.attr("value", response.key);
    $("form").append(input);
});

That"s all.

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108091.html

JavaScript精编干货

摘要：老姚浅谈怎么学鉴于时不时，有同学私信问我老姚，下同怎么学前端的问题。撸码听歌，全局控制。浅析用 js 解析 xml 的方法由于项目上需要解析 xml，于是各种百度，然后自己总结了下各个主流浏览器解析 xml 的方法，只能是很浅显的知道他的用法，但是还没有深层次的研究。装 X - 建立自己的斗图网站库之前加过一个斗图群，看到很多经典的表情，然后就收藏到了 QQ，迫于本屌丝开不起...

Fourierr 2019-08-21 18:46 评论0 收藏0
flask入门4-文件上传与邮件发送

摘要：文件上传邮件发送一原生文件上传修改头像提交文件上传的视图函数有文件上传了拿到文件名称图片上传保存的路径使用和渲染文件上传自定义一个文件上传的表单类修改头像文件不能为空该文件类型不允许上传提交生成随机的图片名称获取图片大小设置尺寸当前缩放文件上传邮件发送一、原生文件上传 form.html 修改头像 manage.py...

vvpale 2019-07-30 16:48 评论0 收藏0
Bootstrap FileInput(文件上传)中文API整理

摘要：默认为选择上传的文件数超出了允许的最大限制。在这种情况下，每一个人选择的文件被上传成功后，触发事件。此事件仅在上传和完成同步或异步批量上传后触发。下载地址、API和DOM地址（英语好的小伙伴可以看看）下载地址：https://github.com/kartik-v/b...API文档：http://plugins.krajee.com/fil...D E M O：http://p...

TwIStOy 2019-08-26 13:36 评论0 收藏0
springmvc 接收上传图片并且存储至本地目录

摘要：图片存储的方式为存储在虚拟目录下并返回虚拟目录的路径。如果是将开发的包直接部署在服务器中，则参考配置虚拟目录。序言：项目环境本次简单的demo是建立在springmvc框架上的，部署环境为tomcat，前段使用的bootstrap+jquery_file_upload组件。图片存储的方式为存储在虚拟目录下并返回虚拟目录的路径。建议先搭配好springmvc环境再继续参考本博客。没有...

SimpleTriangle 2019-08-14 18:37 评论0 收藏0