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 相关文章推荐
Javascript学习笔记2 函数
Jan 11 Javascript
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
Nov 05 Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
Dec 19 Javascript
js跨浏览器实现将字符串转化为xml对象的方法
Sep 25 Javascript
js 操作符汇总
Nov 08 Javascript
javascript比较两个日期相差天数的方法
Jul 23 Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
Aug 06 Javascript
JavaScript中this详解
Sep 01 Javascript
JS实现支持Ajax验证的表单插件
Mar 24 Javascript
jQuery实现鼠标选文字发新浪微博的方法
Apr 02 Javascript
需要牢记的JavaScript基础知识
Sep 25 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
Jul 11 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
索尼ICF-SW100收音机评测
2021/03/02 无线电
php的array_multisort()使用方法介绍
2012/05/16 PHP
php生成N个不重复的随机数实例
2013/11/12 PHP
Yii控制器中filter过滤器用法分析
2016/07/15 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
2007/03/10 Javascript
JQuery跨Iframe选择实现代码
2010/08/19 Javascript
用JQUERY增删元素的代码
2012/02/14 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
2015/08/28 Javascript
在javascript中,null>=0 为真,null==0却为假,null的值详解
2017/02/22 Javascript
angular实现IM聊天图片发送实例
2017/05/08 Javascript
深入浅析vue中cross-env的使用
2019/09/12 Javascript
vue实现弹幕功能
2019/10/25 Javascript
swiper实现异形轮播效果
2019/11/28 Javascript
微信小程序实现倒计时功能
2020/11/19 Javascript
从零学python系列之新版本导入httplib模块报ImportError解决方案
2014/05/23 Python
Python中使用Inotify监控文件实例
2015/02/14 Python
python输出指定月份日历的方法
2015/04/23 Python
python读取excel表格生成erlang数据
2017/08/26 Python
python做量化投资系列之比特币初始配置
2018/01/23 Python
为什么str(float)在Python 3中比Python 2返回更多的数字
2018/10/16 Python
在python中获取div的文本内容并和想定结果进行对比详解
2019/01/02 Python
Python快速转换numpy数组中Nan和Inf的方法实例说明
2019/02/21 Python
Django学习之文件上传与下载
2019/10/06 Python
python numpy数组中的复制知识解析
2020/02/03 Python
python自动脚本的pyautogui入门学习
2020/04/01 Python
Python filter()及reduce()函数使用方法解析
2020/09/05 Python
一年级小学生评语
2014/04/22 职场文书
2014高考励志标语
2014/06/05 职场文书
夫妻分居协议书范本
2014/11/28 职场文书
安全承诺书
2015/01/19 职场文书
工伤劳动仲裁代理词
2015/05/25 职场文书
鲁滨孙漂流记读书笔记
2015/06/30 职场文书
军训决心书范文
2015/09/22 职场文书
2016年教师节感言
2015/12/09 职场文书
python基础之文件操作
2021/10/24 Python
SQL语句多表联合查询的方法示例
2022/04/18 MySQL