WebUploader基本使用

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> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<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>