上传文件,带进度条(可以多文件上传)

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>

posted @   folover  阅读(1014)  评论(0编辑  收藏  举报
编辑推荐:
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· 现代计算机视觉入门之:什么是视频
· 你所不知道的 C/C++ 宏知识
· 聊一聊 操作系统蓝屏 c0000102 的故障分析
阅读排行:
· DeepSeek V3 两周使用总结
· 回顾我的软件开发经历(1)
· C#使用yield关键字提升迭代性能与效率
· 低成本高可用方案!Linux系统下SQL Server数据库镜像配置全流程详解
· 4. 使用sql查询excel内容
点击右上角即可分享
微信分享提示