时间:2021-07-01 10:21:17 帮助过:72人阅读
bootstrap fileinput文件上传插件功能如此强大,样式非常美观,并且支持上传文件预览,ajax同步或异步上传,拖曳文件上传等炫酷的功能,完全没有理由不去使用,
JS引用:
- <script type="text/javascript" src="~/bootstrap/js/fileinput.min.js"></script>
- <link href="~/bootstrap/css/fileinput.min.css" rel="stylesheet" />
- <script src="~/Scripts/lib/jquery.json.js"></script>
HTML:
<input id="fileUpload" type="file" >
JS:
- //自动上传文件-JS
- function initFileInput(ctrlName, uploadUrl) {
- var control = $('#' + ctrlName);
- control.fileinput({
- language: 'zh', //设置语言
- uploadUrl: uploadUrl, //上传的地址 (该方法需返回JSON字符串)
- allowedFileExtensions: ['xlsx', 'xls', 'txt'],//接收的文件后缀
- showUpload: false, //是否显示上传按钮
- showCaption: true,//是否显示标题
- browseClass: "btn btn-primary", //按钮样式
- //previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
- uploadExtraData: { ID: "123" }
- }).on('filebatchselected', function (event, data, id, index) {
- $(this).fileinput("upload");
- }).on("fileuploaded", function (event, data) {
- if (data.response) {
- //通过 data.response.Json对象属性 获得返回数据
- errors = data.response.ErrorList;
- }
- })
- }
- //上传JS初始化
- $(function () {
- initFileInput("fileUpload", "Controllers/Action");
- });
- //获取上传文件弹窗关闭动作
- $("#fileUpload").change(function () { alert("上传文件弹窗已关闭") })
参考资料:bootstrap上传插件fileinput自动上传&成功回调
bootstrap上传插件fileinput功能非常强大,本文给出一例自动上传&上传成功回调的用例.核心就是调用 filebatchselected 文件选择完成事件实现的,文件上传成功的事件是 fileuploaded .
注意插件版本是 version 4.2.7 .
- <script>
- $("#update_csv").fileinput({
- showUpload: false,
- language:'zh',
- uploadAsync:true,
- dropZoneEnabled:false,
- uploadUrl:'http://www.soyiyuan.com/',
- maxFileCount: 1,
- maxImageWidth: 600,
- resizeImage: false,
- showCaption: false,
- showPreview: false,
- browseClass: "btn btn-primary btn-lg",
- allowedFileExtensions : ['csv', 'txt'],
- previewFileIcon: ""
- }).on("filebatchselected", function(event, files) {
- $(this).fileinput("upload");
- })
- .on("fileuploaded", function(event, data) {
- if(data.response)
- {
- alert('处理成功');
- }
- });
- </script>
如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。