上传文件,带进度条(可以多文件上传)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 | <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="width: 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="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(); }); }); </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="width: 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="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(); }); }); </script></span>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· 现代计算机视觉入门之:什么是视频
· 你所不知道的 C/C++ 宏知识
· 聊一聊 操作系统蓝屏 c0000102 的故障分析
· DeepSeek V3 两周使用总结
· 回顾我的软件开发经历(1)
· C#使用yield关键字提升迭代性能与效率
· 低成本高可用方案!Linux系统下SQL Server数据库镜像配置全流程详解
· 4. 使用sql查询excel内容