【Bootstrap】 fileinput:文件or图片上传
2017-08-29 08:57
531 查看
这个是在CSDN一名前辈的微博上学习到的。网址在此:http://blog.csdn.net/Java_chaozi/article/details/53311483。
我就补充几个参数的含义,然后自己加深下理解。
bootsrap fileinput 文件地址下载:https://github.com/kartik-v/bootstrap-fileinput/
我就补充几个参数的含义,然后自己加深下理解。
bootsrap fileinput 文件地址下载:https://github.com/kartik-v/bootstrap-fileinput/
<link rel="stylesheet" href="style/css/approve.css"> <div class="form-group fileContainer"> <label for="myFile" class="col-xs-2 col-lg-1 control-label">上传附件</label> <div class="col-xs-10 col-lg-5"> <input id="myFile" type="file" multiple name="myFile" class="fileloading"> </div> <input type="hidden" name="user.logo" id="logo"> </div> <script src="style/js/jquery-1.10.2.min.js"></script> <script src="style/js/bootstrap.min.js"></script> <script src="style/js/bootstrap-datetimepicker.min.js"></script> <script src="style/js/bootstrap-datetimepicker.zh-CN.js"></script> <script src="style/js/fileinput.js"></script> <script src="style/js/fileinput_zh.js"></script>
function uploadFile() { // upload file $("#myFile").fileinput({ language : 'zh', //设置语言 uploadUrl : "${ctx}/admin/uplode/photo", //上传地址 autoReplace : true, maxFileCount : 1, //表示允许同时上传的最大文件个数 allowedFileExtensions : [ "jpg", "png", "gif","pdf" ],//可接收的文件后缀 browseClass : "btn btn-primary", //按钮样式 dropZoneEnabled: false,//是否显示拖拽区域 showPreview : true, //是否显示预览 enctype: 'multipart/form-data', //上传的文件格式 previewFileIcon : "<i class='glyphicon glyphicon-king'></i>" }).on("fileuploaded", function(e, data) { //异步上传返回结果处理 console.log(data); var res = data.response; alert(res.success); $("#logo").attr("value", res.success); }).on('filepreupload', function(event, data, previewId, index) { //上传前 var form = data.form; var files = data.files; var extra = data.extra; var response = data.response; var reader = data.reader; }); }
相关文章推荐
- Bootstrap FileInput插件上传图片和文件
- Bootstrap框架---krajee插件fileinput--最好用的文件上传组件----单多张图片上传交互方式三(推荐)
- Bootstrap文件(图片)上传插件File Input进阶使用说明
- bootstrap 文件上传插件 fileinput.min.js 可以预览图片
- php 应用 bootstrap-fileinput 上传文件 插件 操作的方法
- bootstrap-fileinput 插件使用总结(最近做项目应用到了这个上传文件的插件,分享下不够完善请指出共同进步)
- Bootstrap-fileinput 多图片上传编辑
- Bootstrap之fileinput文件上传控件
- bootstrap fileinput 文件上传
- Bootstrap-fileinput 多图片上传编辑
- JS组件系列——Bootstrap文件上传组件:bootstrap fileinput
- bootstrap fileinput 文件上传工具
- [转载]thinkphp3.2+bootstrap-inputfile多文件上传
- bootstrap-fileinput,多图片上传踩过的坑
- JS组件系列——Bootstrap文件上传组件:bootstrap fileinput
- JS组件系列——Bootstrap文件上传组件:bootstrap fileinput
- 文件上传预览插件 Bootstrap-fileinput组件封装及使用
- 使用bootstrap图片上传插件(fileInput)springmvc实现图片上传全流程
- .net core版 文件上传/ 支持批量上传拖拽及预览功能(bootstrap fileinput上传文件)
- JS组件系列——Bootstrap文件上传组件:bootstrap fileinput