bootstrap-fileinput 简单使用
2016-09-20 13:50
399 查看
bootstrap-fileinput 是一款图片/文件上传 bootstrap 插件,简单示例代码:
后端代码:
演示效果:
头像上传示例代码:
演示效果:
参考资料:
https://github.com/kartik-v/bootstrap-fileinput
http://plugins.krajee.com/file-input/demo#image-dimensions
JS组件系列——Bootstrap文件上传组件:bootstrap fileinput
<!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 上传图片插件 file-input 的简单使用
- 关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
- bootstrap-fileinput简单使用
- bootstrap 上传图片插件 file-input 的简单使用
- bootstrap-fileinput 插件使用总结(最近做项目应用到了这个上传文件的插件,分享下不够完善请指出共同进步)
- 使用Bootstrap FileInput遇到的坑
- bootstrap fileinput 的使用感悟
- BootStrap Fileinput的使用教程
- Bootstrap File Input 的使用
- Bootstrap FileInput多文件上传插件使用详解(包括Java代码)
- 基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用
- bootstrap-fileinput的使用
- Bootstrap文件上传插件File Input的使用
- BootStrap FileInput 插件上传使用
- bootstrap-fileinput简单完整列子
- Bootstrap-fileinput插件使用教程 支持多文件上传
- Input(file) 控件的简单使用!
- Node项目之bootstrap-fileinput- 上传插件使用
- 基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用