BootStrap Fileinput的使用教程


Posted in Javascript onDecember 30, 2016

bootstrap-fileinput是基于bootstrap的上传控件,此控件网上有很多例子。我照着例子做后发现请求无法提交到后台,反复测试后发现,不能禁止预览(showPreview要设置为true),禁止预览后fileuploaded则无法响应(实际情况是showPreview=false时, 即便是uploadAsync=true, 也是filebatchuploadsuccess响应返回结果。如果showPreview=true, uploadAsync=true, 才是fileuploaded响应返回结果)。

注意:

如果出现$("#xxxx").fileinput({}); 不生效的情况请将fileinput.js中最后几行注释掉:

/* $(document).ready(function () {
    var $input = $('input.file[type=file]'), count = $input.attr('type') ? $input.length : 0;
    if (count > 0) {
      $input.fileinput();
    }
  }); */
<link rel="stylesheet" href="css/bootstrapCSS/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrapCSS/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/bootstrapCSS/fileinput.css" />
<div>
<input type="file" name="uploadfile" id="uploadfile" multiple class="file-loading" />
</div>
<script type="text/JavaScript" src="js/jQuery.min.js"></script>
<script type="text/javascript" src="js/bootstrap/fileinput.js"></script>
<script type="text/javascript" src="js/bootstrap/fileinput_locale_zh.js"></script>
<script type="text/javascript" src="js/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript">
$("#uploadfile").fileinput({
        language: 'zh', //设置语言
        uploadUrl: "http://127.0.0.1/testDemo/fileupload/upload.do", //上传的地址
        allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
        //uploadExtraData:{"id": 1, "fileName":'123.mp3'},
        uploadAsync: true, //默认异步上传
        showUpload: true, //是否显示上传按钮
        showRemove : true, //显示移除按钮
        showPreview : true, //是否显示预览
        showCaption: false,//是否显示标题
        browseClass: "btn btn-primary", //按钮样式   
        dropZoneEnabled: false,//是否显示拖拽区域
        //minImageWidth: 50, //图片的最小宽度
        //minImageHeight: 50,//图片的最小高度
        //maxImageWidth: 1000,//图片的最大宽度
        //maxImageHeight: 1000,//图片的最大高度
        //maxFileSize: 0,//单位为kb,如果为0表示不限制文件大小
        //minFileCount: 0,
        maxFileCount: 10, //表示允许同时上传的最大文件个数
        enctype: 'multipart/form-data',
        validateInitialCount:true,
        previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}!",
      });
//异步上传返回结果处理
$('#uploadfile').on('fileerror', function(event, data, msg) {
      console.log(data.id);
      console.log(data.index);
      console.log(data.file);
      console.log(data.reader);
      console.log(data.files);
      // get message
      alert(msg);
});
//异步上传返回结果处理
$("#uploadfile").on("fileuploaded", function (event, data, previewId, index) {
        console.log(data.id);
        console.log(data.index);
        console.log(data.file);
        console.log(data.reader);
        console.log(data.files);
        var obj = data.response;
        alert(JSON.stringify(data.success));
      });
//同步上传错误处理
    $('#uploadfile').on('filebatchuploaderror', function(event, data, msg) {
      console.log(data.id);
      console.log(data.index);
      console.log(data.file);
      console.log(data.reader);
      console.log(data.files);
      // get message
      alert(msg);
     });
  //同步上传返回结果处理
  $("#uploadfile").on("filebatchuploadsuccess", function (event, data, previewId, index) {
      console.log(data.id);
        console.log(data.index);
        console.log(data.file);
        console.log(data.reader);
        console.log(data.files);
        var obj = data.response;
        alert(JSON.stringify(data.success));
   });
//上传前
$('#uploadfile').on('filepreupload', function(event, data, previewId, index) {
    var form = data.form, files = data.files, extra = data.extra,
      response = data.response, reader = data.reader;
    console.log('File pre upload triggered');
  });
</script>

经查资料得知,异步上传处理错误和返回结果要处理fileerrorfileuploaded方法;同步上传处理错误和返回结果filebatchuploaderrorfilebatchuploadsuccess方法

以上所述是小编给大家介绍的BootStrap Fileinput的使用教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
屏蔽网页右键复制和ctrl+c复制的js代码
Jan 04 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
Sep 06 Javascript
为jquery的ajaxfileupload增加附加参数的方法
Mar 04 Javascript
javascript简单实现命名空间效果
Mar 06 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
Nov 26 Javascript
jQuery实现文本展开收缩特效
Jun 03 Javascript
Js实现京东无延迟菜单效果实例(demo)
Jun 02 Javascript
对TypeScript库进行单元测试的方法
Jul 18 Javascript
浅谈Vue.set实际上是什么
Oct 17 Javascript
js实现百度淘宝搜索功能
Feb 17 Javascript
JS原形与原型链深入详解
May 09 Javascript
Node.js中的异步生成器与异步迭代详解
Jan 31 Javascript
BootStrap Fileinput初始化时的一些参数
Dec 30 #Javascript
bootstrapValidator表单验证插件学习
Dec 30 #Javascript
JS实现类似百叶窗下拉菜单效果
Dec 30 #Javascript
BootStrap实现轮播图效果(收藏)
Dec 30 #Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
Dec 30 #Javascript
javascript实现简单的可随机变色网页计算器示例
Dec 30 #Javascript
ionic2 tabs使用 Modal底部tab弹出框
Dec 30 #Javascript
You might like
php 多个submit提交表单 处理方法
2009/07/07 PHP
vs中通过剪切板循环来循环粘贴不同内容
2011/04/30 PHP
php实现过滤字符串中的中文和数字实例
2015/07/29 PHP
php实现自定义中奖项数和概率的抽奖函数示例
2017/05/26 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
提交表单时执行func方法实现代码
2013/03/17 Javascript
js 通用订单代码
2013/12/23 Javascript
简介JavaScript中substring()方法的使用
2015/06/06 Javascript
jquery实现叠层3D文字特效代码分享
2015/08/21 Javascript
javascript生成随机数方法汇总
2015/11/12 Javascript
jsonp跨域请求数据实现手机号码查询实例分析
2015/12/12 Javascript
小白谈谈对JS原型链的理解
2016/05/03 Javascript
基于jquery实现图片放大功能
2016/05/07 Javascript
Javascript中this绑定的3种方法与比较
2016/10/13 Javascript
JavaScript自执行函数和jQuery扩展方法详解
2017/10/27 jQuery
nodejs搭建本地服务器轻松解决跨域问题
2018/03/21 NodeJs
vue头部导航动态点击处理方法
2018/11/02 Javascript
Angular实现svg和png图片下载实现
2019/05/05 Javascript
vue配置文件实现代理v2版本的方法
2019/06/21 Javascript
JS面向对象实现飞机大战
2020/08/26 Javascript
[01:03:27]NAVI vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python基于xml parse实现解析cdatasection数据
2014/09/30 Python
对Python中的@classmethod用法详解
2018/04/21 Python
python二维列表一维列表的互相转换实例
2018/07/02 Python
python实现对指定字符串补足固定长度倍数截断输出的方法
2018/11/15 Python
Python中的四种交换数值的方法解析
2019/11/18 Python
Django继承自带user表并重写的例子
2019/11/18 Python
基于Django集成CAS实现流程详解
2020/11/28 Python
人力资源管理专业自荐书范文
2014/02/10 职场文书
计算机应用专业毕业生求职信
2014/06/03 职场文书
人力资源管理专业自荐书
2014/07/07 职场文书
教师见习总结范文
2015/06/23 职场文书
掌握这项技巧,一年阅读300本书不是梦
2019/09/12 职场文书
《西游记》读后感(3篇)
2019/09/20 职场文书
Ajax实现局部刷新的方法实例
2021/03/31 Javascript
MYSQL 运算符总结
2021/11/11 MySQL