您的位置：首页 > Web前端 > BootStrap

Bootstrap3 框架下使用 Bootstrap-table 结合 Bootstrap- file input 上传文件并显示进度条

2016-01-05 17:31 711 查看

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
};
});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

Bootstrap3 框架下 使用 Bootstrap-table 结合 Bootstrap- file input 上传文件 并显示进度条

Bootstrap3 框架下使用 Bootstrap-table 结合 Bootstrap- file input 上传文件并显示进度条