Bootstrap3 框架下 使用 Bootstrap-table 结合 Bootstrap- file input 上传文件 并显示进度条
来源：互联网 发布：h3c 端口聚合配置 编辑：程序博客网 时间：2024/06/07 00:07
Bootstrap3框架下 使用 Bootstrap-table 结合 Bootstrap- file input 使用 Bootstrap3-dialog 弹出上传页面列出上传的文件（支持多文件上传）网站中使用的单页面应用 还用到了 require 引用外部JS文件 页面中所有需要的引用，具体文件请到对应官网下载...
</pre><span style="font-size:14px;">文件路径结构如上图</span></p><p><span style="font-size:14px;">contentList.html文件代码如下：</span></p><p><pre name="code" class="html"><span style="font-size:14px;"><!DOCTYPE html><html><head><title>测试首页</title><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><link rel="stylesheet" type="text/css" href="../../css/bootstrap.min.css" /><link rel="stylesheet" type="text/css" href="../../css/bootstrap-table.min.css" /><link rel="stylesheet" type="text/css" href="../../css/bootstrap-dialog.min.css" /><link rel="stylesheet" type="text/css" href="../../css/fileinput.min.css" /><script type="text/javascript" src="../../js/jquery-2.1.4.min.js"></script><script type="text/javascript" src="../../js/bootstrap.min.js"></script><script type="text/javascript" src="../../js/bootstrap-dialog.min.js"></script><script type="text/javascript" src="../../js/bootstrap-table.min.js"></script><script type="text/javascript" src="../../js/fileinput.min.js"></script><script type="text/javascript" src="../../js/require.js"></script></head><body><div class="container-fluid"><div id="mcmListDiv" class="row"><div class="col-xs-10"><div class="row"><div class="col-xs-2"><form id="uploadForm" method="post" action="/docs/file" enctype="multipart/form-data"><input type="file" accept=".doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.pdf,.csv,.htm,.html,.jpg,.jpeg,.tif,.tiff,.bmp,.png,.gif" title="上传文件" multiple="multiple" id="uploadBtn" name="file" data-show-preview="false" /></form></div></div></div></div><div id="uploadFilesDiv" class="hidden"></div></div></body></html><script type="text/javascript">require(["../../js/mcm/contentList"], function(contentList) {contentList.start();});</script></span>fileUpload.html文件代码如下：<span style="font-size:14px;"><!--点击上传按钮弹出的上传页面 --><div id="updating" class="form-group text-center"><label>正在上传：<span id="updated"></span><span id="total"></span></label></div><div id="filesTableDiv"><div id="sameNameDiv" class="alert alert-warning alert-dismissible fade in hidden" role="alert"><p class="sameNameTip">上传文件中有相同名称的文件0个，是否确认上传</p><p><button id="noBtn" type="button" class="btn btn-link">否</button><button id="yesBtn" type="button" class="btn btn-link">是</button></p></div><table id="filesTable" class="table" data-pagination="false" data-unique-id="index"></table></div><script type="text/javascript">require(["../../js/mcm/filesUpload"], function(filesUpload) {filesUpload.start();});</script></span><span style="font-size:14px;"></span>
对应 contentList.js
<span style="font-size:14px;">/** * 内容-文件列表 Created by dyp330 * 修改时间 2015-12-24 */define(function () { "use strict"; function init() { //加载上传页面$("#uploadFilesDiv").html(""); $("#uploadFilesDiv").load("mcm/filesUpload.html"); // 绑定上传组件 $("#uploadBtn").fileinput({ language : "ZH", showCaption : false, showUpload : false, showRemove : false, maxFilesNum : 50, // 最多文件数量 overwriteinitial : false, allowedFileTypes : ["png", "jpg", "gif"], browseClass : "btn btn-info" }); // 修改上传文件按钮的文字-根据需求定义 $("#uploadBtn").prev("span.hidden-xs").html("上传文件"); } function start() { init(); } return { start : start };});</span>最重要的上传JS
filesUpload.js
/** * 内容-文件上传 Created by dyp330 *修改时间 2015-12-25 */define(function () { "use strict"; var $updatedNum = $("#updated"),//已上传数 $totalNum = $("#total"), $updating = $("#updating"),$filesTable = null, $filesTableDiv = null, xhr_process,//显示进程 curUploadingRow, operateEvents;//表格中的操作方法绑定的参数 // 初始化表格只有删除操作项 function operateDelete() { return [ '<a class="fileinput-remove fileinput-remove-button" href="javascript:void(0)" title="删除">', '<i class="icon-default icon-delete-active"></i>', '</a>' ].join(''); } //修改表格中的操作列表的删除 function tableDelBind(num) { $filesTable.bootstrapTable("updateCell", { index : num, field : 'operate', value : operateDelete() }); } //更新表格的状态列表 function updateStateCell(num, stateValue) { $filesTable.bootstrapTable("updateCell", { index : num, field : 'state', value : stateValue }); } //单文件上传 function fileUpload(filesObj,i) { var fd, uploadUrl = "<span style="color:#ff6666;">自己需要上传的地址</span>", updatedNum; //已上传数 if (i === filesObj.length) { //最后一个传完 设置确定按钮可用 $("#dialogOk").removeClass("disabled").prop("disabled", false); return; } fd = new FormData();fd.append('file', filesObj[i]);curUploadingRow = i;$.ajax({url : uploadUrl,type : 'POST',data : fd,cache : false,contentType : false,processData : false,xhr : xhr_process,success : function (result) {// 上传成功的数字加一updatedNum = parseInt($updatedNum.text(), 10) + 1;$updatedNum.html(updatedNum);// 给当前行绑定一个上传成功后的 ID$filesTable.bootstrapTable("updateCell", {index : i,field : 'id',value : result.files[0].id});updateStateCell(i, "上传完成");tableDelBind(i);setTimeout(function () {fileUpload(filesObj, backNameList, i + 1);}, 0);},error : function (result) { updateStateCell(i, "<span class='red'>上传失败</span>");setTimeout(function () {fileUpload(filesObj, backNameList, i + 1);}, 0);}}); } // 多文件上传 function uploadFilesAjax(filesObj, backNameList) { fileUpload(filesObj, backNameList, 0); } /** * 侦查附件上传情况 */ function uploadProgress(evt) { var loaded = evt.loaded, // 已经上传大小情况 total = evt.total, // 附件总大小 percent = Math.floor(100 * loaded / total); // 已经上传的百分比 updateStateCell(curUploadingRow, percent + "%"); } // 显示上传进度 xhr_process = function () { var xhr = $.ajaxSettings.xhr(); if (uploadProgress && xhr.upload) {xhr.upload.addEventListener("progress", uploadProgress, false); } return xhr; }; function operateSize(value) { var size = ""; if (value > 1048576) {size = (value / 1024 / 1024).toFixed(1) + " MB";} else {if (value > 1024) {size = parseInt(value / 1024, 10) + " KB";} else {size = "< 1KB";}} return size; } //删除 function deleteData(fId, index) { var delUrl = "<span style="color:#ff0000;">写自己的地址</span>" + fId; if (fId !== "") { //先删除数据库数据 $.ajax({ url : delUrl, type : 'DELETE', cache : false, async : false,//同步删除的原因 由于在点击取消按钮的时候必须同时上传上传的所有文件 contentType : false, processData : false, success : function (result) { $filesTable.bootstrapTable('removeByUniqueId', [index]); }, error : function (data) { BootstrapDialog.alert({ title : "操作提示", message : "删除失败" }); } }); } else { $filesTable.bootstrapTable('removeByUniqueId', [index]); } } operateEvents ={ 'click .fileinput-remove' : function (e, value, row, index) { deleteData(row.id, row.index); } }; // 初始化上传文弹出框的表格 function initUploadTable(dataObj) { $filesTable = $("#filesTable"); // 绑定uploadFilesDiv filesTable dataObj $filesTable.bootstrapTable({ columns : [{ field : 'id', title : '文件id' }, { field : 'index', title : '序号' }, { field : 'name', title : '文件名称' }, { field : 'size', title : '大小', formatter : operateSize }, { field : 'state', title : '状态' }, { field : 'operate', title : '操作', events : operateEvents } ], data : dataObj, rowStyle: rowStyle }); $filesTable.bootstrapTable('hideColumn', 'id'); } function bindEvent() { $filesTableDiv = $("#filesTableDiv"); // 上传文件 filebatchselected $("#uploadBtn").on('filebatchselected', function (event, files) { var Tabledata = [], // 表格中数据集合 // 依次表格中的tr数据集合,上传总数，已上传数，'-1'代表上传的路径，进程 dataItem = null, total = files.length, updated = 0, process = "0%", i = 0, getId = [], getIdLength, uploadFileDialog = null; //验证文件总数不能超过50个 if (total > 50) { BootstrapDialog.alert({ title : "消息提醒", message : "已选择文件超过一次最多可上传50个数量限制，点击确定后需重新上传文件" }); } else { for (i = 0; i < total; i += 1) { dataItem = { 'id' : '', 'index' : i + 1, 'name' : files[i].name, 'size' : files[i].size, 'state' : process }; //绑定到上传文件列表的 集合 Tabledata.push(dataItem); } // 显示弹出框 uploadFileDialog = new BootstrapDialog({ title : function () { $updatedNum.html(updated); $totalNum.html("/" + total); return $updating; }, cssClass : 'dialogShow', closable : false, closeByBackdrop : false, message : function () { // 绑定table数据，后返回table对象 initUploadTable(Tabledata); return $filesTableDiv; }, type : BootstrapDialog.TYPE_DEFAULT, draggable : true, buttons : [{ id : 'dialogOk', label : '确定', cssClass : 'btn-primary disabled', autospin : false, action : function (dialog) { dialog.close(); } }, { id : 'dialogCancel', label : '取消', cssClass : 'btn-default', autospin : false, action : function (dialog) { $("#sameNameDiv").addClass("hidden");//删除所有已上传的文件//获取上传后文件的ID getId = $filesTable.bootstrapTable('getOptions').data; getIdLength = getId.length; for (i = getIdLength - 1; i >= 0; i -= 1) { if (getId[i] !== undefined) { deleteData(getId[i].id, getId[i].index); } } //是否需要取消所有上传文件 dialog.close(); } }], callback : function (result) {} }); uploadFileDialog.open(); } }); } function start() { bindEvent(); } return { start : start };}); 0 0
- Bootstrap3 框架下 使用 Bootstrap-table 结合 Bootstrap- file input 上传文件 并显示进度条
- Bootstrap file-input 插件使用(大文件上传显示进度条)
- 基于Metronic的Bootstrap开发框架经验总结（5）--Bootstrap文件上传插件File Input的使用
- bootstrap文件上传的使用，带有进度条
- bootstrap File Input 多文件上传插件使用记录（一）配置及批量同步上传
- 使用bootstrap file input大批量上传文件时通过控制上传速度避免服务器压力过大
- bootstrap File Input 多文件上传插件 删除 水印 预置
- bootstrap File Input 多文件上传插件使用记录（二）删除原文件
- Bootstrap File Input 的使用
- bootstrap-file-input使用心得
- bootstrap 上传图片插件 file-input 的简单使用
- bootstrap 上传图片插件 file-input 的简单使用
- 使用input file 上传图片并显示
- Bootstrap Input file 上传文件大小限制设定
- bootstrap-table与mybatis结合使用
- Struts2结合Bootstrap-Table分页的使用
- Bootstrap File Input introduce
- bootstrap-input 上传图片
- Good Bye 2015 A
- 详细SQL注入命令使用方法
- Amazon EC2 Permission denied (publickey)
- view的测量
- Sublime 的中文乱码问题
- Bootstrap3 框架下 使用 Bootstrap-table 结合 Bootstrap- file input 上传文件 并显示进度条
- 火狐控制台提示 jQuery toJSON 报错
- linux虚拟文件系统proc
- AngularJS+ASP.NET MVC+SignalR实现消息推送
- Objective-C中的instancetype和id关键字
- (数组)leetcode 228: Summary Ranges
- ubuntu的apt-get install的默认安装路径
- spark graphx从txt文件中读数据构建图
- TLCL学习总结
