您的位置:68399皇家赌场 > 服务器租用 > bootstrap fileinput完整实例共享

bootstrap fileinput完整实例共享

发布时间:2019-06-29 00:32编辑:服务器租用浏览(178)

    本篇介绍怎样选拔bootstrap fileinput.js,file input插件功效如此有力,样式特别美貌,并且扶助上传文件预览,ajax同步或异步上传,拖曳文件上传等绚烂的效用,最棒用的公文上传组件。

    bootstrap fileinput文件上传插件功效如此庞大,样式极其非凡,并且帮助上传文件预览,ajax同步或异步上传,拖曳文件上传等炫耀的法力,完全未有理由不去行使,

    bootstrap-fileinput是根据bootstrap的上传控件,此控件网络有为数非常多例子。我照着例子做后意识呼吁不可能提交到后台,一再测量检验后发觉,不能禁止预览(showPreview要安装为true),禁止预览后fileuploaded则无从响应(实际境况是showPreview=false时, 即正是uploadAsync=true, 也是filebatchuploadsuccess响应再次回到结果。借使showPreview=true, uploadAsync=truewww.68399.com,, 才是fileuploaded响应重回结果)。

    大家只要对Bootstrap-fileinput 的布局不知晓的话,我们能够查阅官方网站:。

    文件夹结构

    JS引用:

    BootStrap Fileinput初步化时的一对参数

    逻辑表达:先从后台获取数据展现,然后举行编辑。

    www.68399.com 1

    <script type="text/javascript" src="~/bootstrap/js/fileinput.min.js"></script>
    <link href="~/bootstrap/css/fileinput.min.css" rel="stylesheet" />
    <script src="~/Scripts/lib/jquery.json.js"></script>
    

    注意:

    废话十分的少说, 直接上代码.

    本子都以3.x

    HTML:

    假若出现$("#xxxx").fileinput({}); 不见效的事态请将fileinput.js中最终几行注释掉:

    1. 页面部分代码:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
     <head>
     <title> New Document </title>
     <meta name="Generator" content="EditPlus">
     <meta name="Author" content="">
     <meta name="Keywords" content="">
     <meta name="Description" content="">
     <link href="bootstrap-3.3.5/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="bootstrap-fileinput-master/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
    <script src="jquery-2.1.1.min.js"></script>x
    <script src="bootstrap-fileinput-master/js/plugins/canvas-to-blob.min.js" type="text/javascript"></script>
    <script src="bootstrap-fileinput-master/js/fileinput.min.js"></script>
    <script src="bootstrap-3.3.5/dist/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="bootstrap-fileinput-master/js/fileinput_locale_zh.js"></script>
     </head>
    
     <body>
    <form>
     <div class="" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
     <div class="modal-dialog modal-lg" role="document">
     <div class="modal-content">
     <div class="modal-header">
     <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>
     <h4 class="modal-title" id="myModalLabel">请选择Excel文件</h4>
     </div>
     <div class="modal-body">
     <a href="~/Data/ExcelTemplate/Order.xlsx" class="form-control" style="border:none;">下载导入模板</a>
     <input type="file" name="txt_file" id="txt_file" multiple class="file-loading" />
     </div></div>
     </div>
     </div>
    </form>
     </body>
    </html>
    
    <script>
    $(function () {
     //0.初始化fileinput
     var oFileInput = new FileInput();
     oFileInput.Init("txt_file", "/api/OrderApi/ImportOrder");
    });
    
    
    
    //初始化fileinput
    var FileInput = function () {
     var oFile = new Object();
    
     //初始化fileinput控件(第一次初始化)
     oFile.Init = function(ctrlName, uploadUrl) {
     var control = $('#'   ctrlName);
    
     //初始化上传控件的样式
     control.fileinput({
     language: 'zh', //设置语言
     uploadUrl: uploadUrl, //上传的地址
     allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
     showUpload: 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}!",
     });
    
     //导入文件上传完成之后的事件
     $("#txt_file").on("fileuploaded", function (event, data, previewId, index) {
     $("#myModal").modal("hide");
     var data = data.response.lstOrderImport;
     if (data == undefined) {
     toastr.error('文件格式类型不正确');
     return;
     }
     //1.初始化表格
     var oTable = new TableInit();
     oTable.Init(data);
     $("#div_startimport").show();
     });
    }
     return oFile;
    };
    </script> 
    

    <input id="fileUpload" type="file"  >

    /* $(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>
    
    <div class="form-group"> 
    <label for="inputEmail3" class="col-xs-3 control-label">项目LOGO</label> 
    <div class="col-xs-7"> 
    <input id="testlogo" type="file" name="icoFile" class="file-loading" /> 
    <input type="text" name="htestlogo" id="htestlogo" onchange="addFile(this)" > 
    </div> 
    </div>
    

    文化唯有分享本事传入,技术推崇出新的知识,本事学到更加多,这里写的每一篇文字/博客,基本都是从网络查询了弹指间资料然后记录下来,也某个是原滋原味搬了过来,也是有时加了部分自身的主见,希望大家喜爱。

    JS: 

    经查资料得知,异步上传管理错误和再次回到结果要拍卖fileerrorfileuploaded措施;同步上传管理错误和重回结果filebatchuploaderrorfilebatchuploadsuccess方法

    证实: 在那之中onchange()为自家专门的工作须要, 上传实现后自行施行三个抬高事件。 此方法能够去掉。

    假诺我们还想深入学习,能够点击这里拓展学习,再为大家附三个优质的专项论题:Bootstrap学习课程 Bootstrap实战教程

     //自动上传文件-JS
     function initFileInput(ctrlName, uploadUrl) {
     var control = $('#'   ctrlName);
    
     control.fileinput({
      language: 'zh', //设置语言
      uploadUrl: uploadUrl, //上传的地址 (该方法需返回JSON字符串)
      allowedFileExtensions: ['xlsx', 'xls', 'txt'],//接收的文件后缀
      showUpload: false, //是否显示上传按钮
      showCaption: true,//是否显示标题
      browseClass: "btn btn-primary", //按钮样式
      //previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
      uploadExtraData: { ID: "123" }
     }).on('filebatchselected', function (event, data, id, index) {
      $(this).fileinput("upload");
     }).on("fileuploaded", function (event, data) {
      if (data.response) {
    
      //通过 data.response.Json对象属性 获得返回数据
      errors = data.response.ErrorList;
      }
     })
     }
    
    //上传JS初始化
     $(function () {
     initFileInput("fileUpload", "Controllers/Action");
     });
    //获取上传文件弹窗关闭动作
    $("#fileUpload").change(function () { alert("上传文件弹窗已关闭") })
    

    如上所述是作者给我们介绍的BootStrap Fileinput的施用教程,希望对大家全部帮忙,假若大家有此外疑问请给自个儿留言,笔者会及时回复大家的。在此也极其多谢大家对台本之家网址的支撑!

    2. 赢得早先化数据格局:

    本文由68399皇家赌场发布于服务器租用,转载请注明出处:bootstrap fileinput完整实例共享

    关键词: 68399皇家赌场