bootstrap-fileinput 简单使用

bootstrap-fileinput 是一款图片/文件上传 bootstrap 插件，简单示例代码：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><link href="/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"><link href="/lib/bootstrap-fileinput/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" /><script src="/lib/jquery/dist/jquery.min.js"></script><script src="/lib/bootstrap-fileinput/js/plugins/canvas-to-blob.min.js" type="text/javascript"></script><script src="/lib/bootstrap-fileinput/js/fileinput.min.js"></script><script src="/lib/bootstrap/dist/js/bootstrap.min.js" type="text/javascript"></script><script src="/lib/bootstrap-fileinput/js/fileinput_locale_zh.js"></script>
</head>
<body><input id="fileinput" name="fileinput" type="file" multiple accept="image/*" class="file-loading"><script>$("#fileinput").fileinput({language: 'zh',uploadUrl: "/ajax/upload",uploadAsync: true,allowedFileExtensions: ['jpg', 'gif', 'png', 'jpeg']});//上传成功后执行$("#fileinput").on("fileuploaded", function (event, data, previewId, index) {console.log(data.response.msg);});</script>
</body>
</html>

后端代码：

public class AjaxController : Controller
{public IActionResult Upload(){var file = HttpContext.Request.Form.Files[0];return Json(new { success = true, msg = "image url after upload" });}
}

演示效果：

头像上传示例代码：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><link href="/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"><link href="/lib/bootstrap-fileinput/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" /><script src="/lib/jquery/dist/jquery.min.js"></script><script src="/lib/bootstrap-fileinput/js/plugins/canvas-to-blob.min.js" type="text/javascript"></script><script src="/lib/bootstrap-fileinput/js/fileinput.min.js"></script><script src="/lib/bootstrap/dist/js/bootstrap.min.js" type="text/javascript"></script><script src="/lib/bootstrap-fileinput/js/fileinput_locale_zh.js"></script>
</head>
<body><style>.kv-avatar .file-preview-frame, .kv-avatar .file-preview-frame:hover {margin: 0;padding: 0;border: none;box-shadow: none;text-align: center;}.kv-avatar .file-input {display: table-cell;max-width: 220px;}</style><!-- the avatar markup --><div id="kv-avatar-errors-1" class="center-block" style="width:800px;display:none"></div><form class="text-center" action="/ajax/upload" method="post" enctype="multipart/form-data"><div class="kv-avatar center-block" style="width:200px"><input id="fileinput" name="fileinput" type="file" class="file-loading"></div></form><script>$("#fileinput").fileinput({language: 'zh',overwriteInitial: true,maxFileSize: 1500,showClose: false,showCaption: false,browseLabel: '',removeLabel: '',browseIcon: '<i class="glyphicon glyphicon-folder-open"></i>',removeIcon: '<i class="glyphicon glyphicon-remove"></i>',removeTitle: 'Cancel or reset changes',elErrorContainer: '#kv-avatar-errors-1',msgErrorClass: 'alert alert-block alert-danger',defaultPreviewContent: '<img src="/images/default_avatar_male.jpg" alt="Your Avatar" style="width:160px">',layoutTemplates: { main2: '{preview} {upload} {browse}' },allowedFileExtensions: ["jpg", "png", "gif"]});//上传成功后执行$("#fileinput").on("fileuploaded", function (event, data, previewId, index) {console.log(data.response.msg);});</script>
</body>
</html>

演示效果：

参考资料：

https://github.com/kartik-v/bootstrap-fileinput
http://plugins.krajee.com/file-input/demo#image-dimensions
JS组件系列——Bootstrap文件上传组件：bootstrap fileinput

bootstrap-fileinput 简单使用相关推荐

bootstrap+fileinput插件实现可预览上传照片功能
图片.png 实际项目中运用: 图片.png 功能:实现上传图片,更改上传图片,移除图片的功能 <!DOCTYPE html> <html><head><me ...
php 使用上传文件预览插件,bootstrap fileinput插件实现预览上传照片功能方法详解...
本文主要介绍了bootstrap fileinput插件实现预览上传照片功能,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友可以参考下,希望能帮助到大家. 效果图如下所示: 具体代码如下: cl ...
kingedit 上传php_JS文件上传神器bootstrap fileinput详解
Bootstrap FileInput插件功能如此强大,完全没有理由不去使用,但是国内很少能找到本插件完整的使用方法,于是本人去其官网翻译了一下英文说明文档放在这里供英文不好的同学勉强查阅.另外附上一 ...
fileinput.js php,JS文件上传神器bootstrap fileinput的解析
这篇文章主要介绍了JS文件上传神器Bootstrap FileInput,样式非常美观,并且支持上传文件预览,ajax同步或异步上传,拖曳文件上传等炫酷的功能,具有一定的参考价值,感兴趣的小伙伴们可以 ...
bootstrap fileinput上传组件和form表单一起提交
最近做到文件上传,用的是bootstrap fileinput上传组件,一般做文件上传我们有两种方式. 1:先上传文件,获取文件的回显值后赋值给form表单的字段文件属性,然后上传form表单. 2: ...
基于bootstrap实现简单用户管理功能
基于bootstrap实现简单用户管理功能,包括增删改以及列表分页展示功能. 1.web.xml配置servlet映射: <servlet><servlet-name>User ...
Bootstrap fileinput.js，最好用的文件上传组件
本篇介绍如何使用bootstrap fileinput.js(最好用的文件上传组件)来进行图片的展示,上传,包括springMVC后端文件保存. 一.demo 二.插件引入 <link ty ...
Bootstrap FileInput(文件上传)中文API整理
下载地址.API和DOM地址(英语好的小伙伴可以看看) 下载地址:https://github.com/kartik-v/bootstrap-fileinput API文档 :http://plugi ...
为什么手机上传图片这么慢前端_解决BootStrap Fileinput手机图片上传显示旋转问题_心病_前端开发者...
最近因为项目需要用到了bootstrap fileinput的插件,在使用苹果手机上传图片预览时,发现图片方向和手机本地存储方向不一致问题.后来通过查询资料了解图片具有EXIF(Exchangeabl ...
SSM框架基于Bootstrap fileinput 实现文件上传功能
SSM框架基于Bootstrap fileinput 实现文件上传功能 pom.xml文件的配置想要实现SSM框架实现多文件上传,必要的jar包必须要在pom.xml文件中引入.如下: <! ...

bootstrap-fileinput 简单使用

bootstrap-fileinput 简单使用相关推荐

最新文章

热门文章