1、引入WebUploader.js文件
<link type="text/css" rel="Stylesheet" href="~/Content/js/webuploader/webuploader.css" />
<script type="text/javascript" src="~/Content/js/webuploader/webuploader.html5only.js"></script>
<script src="~/Content/layer/layer.js"></script>
<link rel="stylesheet" href="~/Content/layui1.0.9/css/layui.css" media="all">
2、弹框内容（页面具体布局适当调整）
<div style="height: 400px; width: 460px; border: 1px solid #d7d3d3; margin: 0px auto;">
<div class="btns">
<div id="thelist" class="uploader-list"></div>
<div id="picker">选择文件</div>
</div>
</div>
<div class="fileTips">
<ul>
<li>允许文档类型：word excel ppt pdf</li>
<li>允许文件大小：50M ,文件个数：5</li>
</ul>
</div>
<div style="height: 50px; width: 460px; text-align: right; margin-top: 10px;">
<button id="ctlBtn" class="btn btn-primary" style="background-color:rgb(0, 183, 238); border-color:rgb(0, 183, 238)">上传</button>
</div>
3、WebUploader文件上传组件初始化及组件常用方法
<script type="text/javascript">
$(document).ready(function () {
var allMaxSize = 50;//变量：限制单个文件上传大小
var uploader = WebUploader.create({
// swf文件路径（资源路径）
swf: '~/Content/js/webuploader/Uploader.swf',
// 文件接收服务端（controller）
server: 'UploadHandler',
//限制文件数量
fileNumLimit: 5,
fileSizeLimit: allMaxSize * 5 * 1024 * 1024,//限制大小200M，所有被选文件，超出选择不上
fileSingleSizeLimit: allMaxSize * 1024 * 1024,//限制大小50M，单文件
// 选择文件的按钮
pick: '#picker',
//传递的参数
formData: { 'userID': '1', "FileCategory": '@ViewBag.fileId', "PlanGuid": '@ViewBag.PlanGuid', "PlanFlowGuid": '@ViewBag.PlanFlowGuid', "XMNAME": '@ViewBag.XMNAME', "TYPENAME": '@ViewBag.TYPENAME' },
/**
* 对文件格式的处理
* title：文字描述
* extensions/mimeTypes：允许的文件后缀
*/
accept: {
title: '支持的文件格式',
extensions: 'doc,docx,xls,xlsx,ppt,pptx,pdf'
},
// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
resize: false
});
//上传成功事件
uploader.on('uploadSuccess', function (file, data, respone) {//data中的参数以debugger确定
if (data._raw != "0") {
parent.$("#@ViewBag.divId").append("<li style=\" line-height:26px; list-style:none;\"><i class=\"\"> </i>" + file.name + " "
+ "<span style=\"color:#525cc8;cursor:pointer;\" id=\"" + data._raw + "\" onclick=\"removeFile(this,'" + data._raw + "','" + file.name + "');\">删除</span></li> ");
}
});
//上传完成后关闭弹出
uploader.on('uploadComplete', function (file) {
setTimeout("closeLayer()", 2000);
});
// 当有文件被添加进队列的时候
uploader.on('fileQueued', function (file) {
var $list = $("#thelist");
$list.append('<div id="' + file.id + '" class="item" style="margin-bottom:20px">' +
'<h4 class="info">' + file.name + '</h4>' +
'<span class="state">等待上传...</span> <span class="'+file.id+'" style="color:red">取消</span>' +
'<p class="progress progress-bar">上传进度...</p>' +
'</div>');
//去除已选文件的节点内容
$list.on("click", "."+file.id, function () {
var fileItem = $('#'+file.id);
var id = $(fileItem).attr("id");
uploader.removeFile(id, true);
$(fileItem).fadeOut(function () {
$(fileItem).remove();
});
});
});
// 文件上传过程中创建进度条实时显示。
uploader.on('uploadProgress', function (file, percentage) {
var $li = $('#' + file.id),
$percent = $li.find('.progress .progress-bar');
// 避免重复创建
if (!$percent.length) {
$percent = $('<div class="progress progress-striped active">' +
'<div class="progress-bar" role="progressbar" style="width: 0%">' +
'</div>' +
'</div>').appendTo($li).find('.progress-bar');
}
$li.find('p.state').text('上传中');
$percent.css('width', percentage * 100 + '%');
});
// 验证大小（文件上传错误信息，通过type类型来提示用户）
uploader.on("error", function (type) {
if (type == "F_DUPLICATE") {
layer.msg('请不要选择重复文件！', {
icon: 1
})
} else if (type == "F_EXCEED_SIZE") {
layer.msg("单个文件大小不可超过" + allMaxSize + "M", {
icon: 1
})
} else if (type == "Q_TYPE_DENIED") {
layer.msg("暂不支持此格式的文件", {
icon: 1
})
}
});
//调用WebUploader组件上传方法
$("#ctlBtn").on('click', function () {
uploader.upload();
});
});
//关闭弹出（定时器）
function closeLayer() {
parent.layer.close(parent.layer.getFrameIndex(window.name));
}
</script>