上传文件，带进度条（可以多文件上传）

<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<link href="~/Scripts/1/bootstrap.css" rel="stylesheet" />
<link href="~/Scripts/1/webuploader.css" rel="stylesheet" />

<script src="~/Scripts/1/webuploader.js"></script>
<script src="~/Scripts/1/bootstrap.min.js"></script>


<div id="uploader" class="wu-example">
<!--用来存放文件信息-->
<div id="thelist" class="uploader-list"></div>
<div class="btns">
<div id="picker">选择文件</div>

</div>
</div>


<span style="font-size: 14px;">
<script type="text/javascript">
$(function () {
/*init webuploader*/
var $list = $("#thelist"); //这几个初始化全局的百度文档上没说明，一定要写明。 
var $btn = $("#ctlBtn"); //开始上传 
var uploader = WebUploader.create({
auto: true,
// swf文件路径
swf: '/Scripts/1/Uploader.swf',

// 文件接收服务端。
server: '/Home/ii/',

// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick:  '#picker',

// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
resize: false,


accept: {
title: 'Applications',
extensions: 'xls,xlsx,doc,docx,ppt,pptx,flv,mp4,jpg,npg',
mimeTypes: 'application/xls,application/xlsx,,application/doc,,application/docx,,application/ppt,,application/pptx,image/jpg'
}

});
// 当有文件被添加进队列的时候
uploader.on('fileQueued', function (file) {
$list.append('<div id="' + file.id + '" class="item">' +
'<h4 class="info">' + file.name + '</h4>' +
'<p class="state">等待上传...</p>' +
'</div>');
});



// 文件上传过程中创建进度条实时显示。
uploader.on('uploadProgress', function (file, percentage) {
var $li = $('#' + file.id),
$percent = $li.find('.progress .progress-bar');

// 避免重复创建
if (!$percent.length) {
$percent = $('<div class="progress ctive">' +
'<div class="progress-bar" role="progressbar" style=" 0%">' +
'</div>' +
'</div>').appendTo($li).find('.progress-bar');
}
//if (!$percent.length) {
// $percent = $('<div class="progress progress-striped active">' +
// '<div class="progress-bar" role="progressbar" style=" 0%">' +
// '</div>' +
// '</div>').appendTo($li).find('.progress-bar');
//}
$li.find('p.state').text('上传中');

$percent.css('width', percentage * 100 + '%');
});
uploader.on('uploadSuccess', function (file) {
$('#' + file.id).find('p.state').text('已完成');
});

uploader.on('uploadError', function (file) {
$('#' + file.id).find('p.state').text('上传出错');
});

uploader.on('uploadComplete', function (file) {
//$('#' + file.id).find('.progress').fadeOut();
});
});
</script>
</span>

@{ ViewBag.Title = "主页";}

<script src="~/Scripts/jquery-1.9.1.min.js"></script><link href="~/Scripts/1/bootstrap.css" rel="stylesheet" /><link href="~/Scripts/1/webuploader.css" rel="stylesheet" />
<script src="~/Scripts/1/webuploader.js"></script><script src="~/Scripts/1/bootstrap.min.js"></script>@*<script src="~/Scripts/1/webuploader.js"></script>*@
<div id="uploader" class="wu-example">  <div id="thelist" class="uploader-list"></div> <div class="btns"> <div id="picker">选择文件</div>
</div></div>

<span style="font-size: 14px;"> <script type="text/javascript"> $(function () { /*init webuploader*/ var $list = $("#thelist"); //这几个初始化全局的百度文档上没说明，好蛋疼。 var $btn = $("#ctlBtn"); //开始上传 var uploader = WebUploader.create({ auto: true, // swf文件路径 swf: '/Scripts/1/Uploader.swf',
// 文件接收服务端。 server: '/Home/ii/',
// 选择文件的按钮。可选。 // 内部根据当前运行是创建，可能是input元素，也可能是flash. pick: { id: '#picker', //只能选择一个文件上传 multiple: false }, fileSingleSizeLimit: 1 * 1024 * 1024, //设定单个文件大小 //限制只能上传一个文件 fileNumLimit: 1,
// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！ resize: false, // 只允许选择excel表格文件。 accept: { title: 'Applications', extensions: 'xls,xlsx,doc,docx,ppt,pptx,flv,mp4,jpg,npg', mimeTypes: 'application/xls,application/xlsx,,application/doc,,application/docx,,application/ppt,,application/pptx,image/jpg' }
}); // 当有文件被添加进队列的时候 uploader.on('fileQueued', function (file) { $list.append('<div id="' + file.id + '" class="item">' + '<h4 class="info">' + file.name + '</h4>' + '<p class="state">等待上传...</p>' + '</div>'); });
/** * 验证文件格式以及文件大小 */ uploader.on("error", function (type) { if (type == "Q_TYPE_DENIED") { dialogMsg("myModal", "messageP", "请上传JPG、PNG格式文件"); } else if (type == "F_EXCEED_SIZE") { dialogMsg("myModal", "messageP", "文件大小不能超过8M"); } });
// 文件上传过程中创建进度条实时显示。 uploader.on('uploadProgress', function (file, percentage) { var $li = $('#' + file.id), $percent = $li.find('.progress .progress-bar');
// 避免重复创建 if (!$percent.length) { $percent = $('<div class="progress ctive">' + '<div class="progress-bar" role="progressbar" style=" 0%">' + '</div>' + '</div>').appendTo($li).find('.progress-bar'); } //if (!$percent.length) { // $percent = $('<div class="progress progress-striped active">' + // '<div class="progress-bar" role="progressbar" style=" 0%">' + // '</div>' + // '</div>').appendTo($li).find('.progress-bar'); //} $li.find('p.state').text('上传中');
$percent.css('width', percentage * 100 + '%'); }); uploader.on('uploadSuccess', function (file) { $('#' + file.id).find('p.state').text('已完成'); });
uploader.on('uploadError', function (file) { $('#' + file.id).find('p.state').text('上传出错'); });
uploader.on('uploadComplete', function (file) { //$('#' + file.id).find('.progress').fadeOut(); }); }); </script></span>