bootstrap-fileinput插件的文件上传(部分未实现)
2018-12-11 10:06
459 查看
# fileinput插件可以快速实现对页面中多个文件上传的功能,样式也不错
>[info] 先上个图
[蓝奏云下载地址(关于fileinput的js,css和中文js和bootstrap的js,css)](https://www.lanzous.com/i2kptcd)
附 [插件API说明](https://blog.csdn.net/u012526194/article/details/69937741/)
- 引入js和css
不要将下载的bootstrap中的js和css复制出来 css中对于图标和字体定义的是相对路径 拿出来就破坏了他定义的目录结构(主要还是懒,改都不想改)
然后复制一下下面的代码就ok了
[code]<body> <input class="file-loading" id="input-711" multiple name="kartik-input-711[]" type="file"> </body> <script> $(function () { $("#input-711").fileinput({ language: 'zh', //设置语言 uploadUrl: "http://127.0.0.1/testDemo/fileupload/upload.do", //上传的地址 browseOnZoneClick: true,//点击虚线框内(上传区)上传(非点击上传按钮上传) allowedFileExtensions: ['jpg', 'png', 'pdf'],//接收的文件后缀 //uploadExtraData:{"id": 1, "fileName":'123.mp3'}, uploadAsync: true, //默认异步上传 showUpload: true, //是否显示上传按钮 showRemove: true, //显示移除按钮 showPreview: true, //是否显示预览 showCaption: true,//是否显示标题 browseClass: "btn btn-primary", //按钮样式 dropZoneEnabled: true,//是否显示拖拽区域 previewSettings: { // image: {width: "auto", height: "200px"}, pdf:{width:"auto",height:"160px"} }, // minImageWidth: 70, //图片的最小宽度 //minImageHeight: 50,//图片的最小高度 //maxImageWidth: 1000,//图片的最大宽度 // maxImageHeight: 100,//图片的最大高度 //maxFileSize:0,//单位为kb,如果为0表示不限制文件大小 //minFileCount: 0, maxFileCount: 10, //表示允许同时上传的最大文件个数 enctype: 'multipart/form-data', validateInitialCount: true, previewFileIcon: "<iclass='glyphicon glyphicon-king'></i>", msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}!", uploadLabel: "开始上传", removeLabel: "清除所有", browseLabel: "选择本地文件" }).on("fileuploaded", function (event, data, previewId, index) { console.info("执行!"); }); }); </script>[/code]
有个问题:
- 回显(这个真心不会)
- 不允许上传的文件让其选择不了才是最好,而不是选择之后提示类型不符
相关文章推荐
- BootStrap FileInput 插件实现多文件上传前端功能
- Bootstrap的fileinput插件实现多文件上传的方法
- 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)
- 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)
- Bootstrap的fileinput插件实现多文件上传的方法
- 结合bootstrap fileinput插件和Bootstrap-table表格插件,实现文件上传、预览、提交的导入Excel数据操作流程
- springboot+bootstrap fileupinput 插件实现文件上传
- BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
- php 应用 bootstrap-fileinput 上传文件 插件 操作的方法
- 使用插件Bootstrap Fileinput文件上传
- 支持多文件上传,预览,拖拽,基于bootstrap的上传插件fileinput的ajax异步上传
- Bootstrap FileInput多文件上传插件使用详解(包括Java代码)
- (转)基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用
- bootstrapfileinput实现文件自动上传
- 基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用
- bootstrap fileinput实现文件上传功能
- bootstrap+fileinput插件实现可预览上传照片功能
- Django 上传文件(bootstrap file input插件) 中文乱码 解决 (python3)
- Bootstrap文件上传插件File Input的使用
- 基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解