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 相关文章推荐
菜单效果
Oct 14 Javascript
js 面向对象的技术创建高级 Web 应用程序
Feb 25 Javascript
一个关于javascript匿名函数的问题分析
Mar 30 Javascript
表单序列化与jq中的serialize使用示例
Feb 21 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
Sep 03 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
Dec 18 Javascript
javascript 闭包详解
Feb 15 Javascript
全屏js头像上传插件源码高清版
Mar 29 Javascript
在vue中阻止浏览器后退的实例
Nov 06 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
Dec 24 Javascript
JavaScript实现简单验证码
Aug 24 Javascript
解决vux 中popup 组件Mask 遮罩在最上层的问题
Nov 03 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 处理图片的类实现代码
2009/10/23 PHP
PHP面向对象学习笔记之二 生成对象的设计模式
2012/10/06 PHP
PDO防注入原理分析以及使用PDO的注意事项总结
2014/10/23 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
php的RSA加密解密算法原理与用法分析
2020/01/23 PHP
php中用unset销毁变量并释放内存
2020/05/10 PHP
JTrackBar水平拖动效果
2007/07/15 Javascript
图片自动缩小 点击放大
2008/07/07 Javascript
JS IE和FF兼容性问题汇总
2009/02/09 Javascript
JS 操作符整理[推荐收藏]
2011/11/15 Javascript
jquery div 居中技巧应用介绍
2012/11/24 Javascript
根据选择不同的下拉值出现相对应的文本输入框
2013/08/01 Javascript
Asp.Net alert弹出提示信息的几种方法总结
2014/01/29 Javascript
判断某个字符在一个字符串中是否存在的js代码
2014/02/28 Javascript
JS实用的动画弹出层效果实例
2015/05/05 Javascript
JavaScript获得指定对象大小的方法
2015/07/01 Javascript
基于jQuery实现响应式圆形图片轮播特效
2015/11/25 Javascript
JS代码防止SQL注入的方法(超简单)
2016/04/12 Javascript
jQueryUI DatePicker 添加时分秒
2016/06/04 Javascript
基于JS实现无缝滚动思路及代码分享
2016/06/07 Javascript
Javascript网页抢红包外挂实现分享
2018/01/11 Javascript
vscode中Vue别名路径提示的实现
2020/07/31 Javascript
用于统计项目中代码总行数的Python脚本分享
2015/04/21 Python
django框架之cookie/session的使用示例(小结)
2018/10/15 Python
python重要函数eval多种用法解析
2020/01/14 Python
python的reverse函数翻转结果为None的问题
2020/05/11 Python
tensorflow图像裁剪进行数据增强操作
2020/06/30 Python
Python 实现二叉查找树的示例代码
2020/12/21 Python
个人自我剖析材料
2014/02/07 职场文书
大学生求职计划书
2014/04/30 职场文书
借款协议书
2014/09/16 职场文书
2014党员批评和自我批评思想汇报
2014/09/21 职场文书
反对四风问题自我剖析材料
2014/09/29 职场文书
有关浪费资源的建议书
2015/09/14 职场文书
Win11怎么修改电源模式?Win11修改电源模式的方法
2022/04/05 数码科技
MySQL事务操作的四大特性以及并发事务问题
2022/04/12 MySQL