webuploader插件单个文件上传（带进度条）

@{ ???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: 100 * 1024 * 1024, ??//设定单个文件大小 ???????????????//限制只能上传一个文件 ???????????????fileNumLimit: 1, ???????????????// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！ ???????????????resize: false, ?????????????????????????????// 只允许选择excel表格文件。 ???????????????accept: { ???????????????????title: ‘Applications‘, ???????????????????extensions: ‘xls,xlsx,doc,docx,ppt,pptx,flv,mp4,jpg,png‘, ???????????????????mimeTypes: ‘application/xls,application/xlsx,application/doc,application/docx,application/ppt,application/pptx,image/jpg,image/png‘ ???????????????} ???????????}); ???????????// 当有文件被添加进队列的时候 ???????????uploader.on(‘fileQueued‘, function (file) { ???????????????var $li = $(‘#‘ + file.id), ?????????????????????$percent = $li.find(‘.info‘); ???????????????console.log($percent); ???????????????if (!$percent.length) { ???????????????????$list.html(‘<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") { ????????????????????????????alert("格式不正确"); ?????????????????????????} else if (type == "F_EXCEED_SIZE") { ?????????????????????????????alert("文件大小超过限制"); ?????????????????????????} ?????????????????????}); ???????????// 文件上传过程中创建进度条实时显示。 ???????????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="width: 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(); ???????????????//上传完成后重启upload，只能单个上传 ??????????????????????????}); ???????}); ???</script></span>