-
Notifications
You must be signed in to change notification settings - Fork 24
/
Copy pathindex.html
149 lines (140 loc) · 5.87 KB
/
index.html
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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Uploader</title>
<style type="text/css">
* {margin:0; padding:0;}
body {font:12px/1.5 tohama,arial;}
a {text-decoration:none}
a:hover {text-decoration:underline;}
/*.upload-btn-over {background:#f00}*/
</style>
<link rel="stylesheet" href="jquery.uploader.css">
</head>
<body>
<h2>建议打开控制台查看上传过程</h2>
<br>
<span style="color:red">注意：1、本示例限制了只能上传 jpg,jpeg,gif,png 格式；2、文件大小超过1M（1024KB）则禁止上传</span>
<br><br>
<button type="button" id="selectFile">选择文件</button>
<a href="javascript:" onclick="$('#selectFile').uploader('start');" style="margin-left:20px;">开始上传</a>
<a href="javascript:" onclick="$('#selectFile').uploader('cancel', '*');">清空队列</a>
<span id="show_speed" style="margin-left:2em"></span>
<div id="queue" style="width:600px"></div>
<br><br>
<div id="preview"></div>
<script type="text/javascript" src="http://cdn.staticfile.org/jquery/1.11.0/jquery.min.js"></script>
<!--script type="text/javascript" src="../static/js/jquery/jquery-1.7.2.min.js"></script-->
<script type="text/javascript" src="src/jquery.uploader.js"></script>
<script type="text/javascript">
function log(obj1, obj2){
if ('console' in window) {
obj2 ? console.log(obj1, obj2) : console.log(obj1);
}
}
$(function(){
var previewHTML = '';
$('#selectFile').uploader({
action: 'upload.php', //服务端脚本
//mode: 'flash', //上传模式，html5/flash
name: "file", //字段名
formData: {}, //
multiple: true, //是否多选
auto: false, //是否自动上传
//debug:true,
preview: true,
showQueue: '#queue', //显示队列的位置（传递jQuery选择器自定义队列显示的元素，传递true自动生成队列）
fileSizeLimit: '1M', //文件大小限制（'100kb' '5M' 等）
fileTypeDesc: '选择图片文件', //可选择的文件的描述，用中竖线分组。此字符串出现在浏览文件对话框的文件类型下拉中
fileTypeExts: 'jpg,jpeg,gif,png', //允许上传的文件类型类表，用逗号分隔多个扩展，用中竖线分组（eg: 'jpg,jpeg,gif,png | zip,rar'）
/*
// 鼠标点击触发按钮
onMouseClick: function(){
//log('onMouseClick')
},
// 鼠标经过触发按钮
onMouseOver: function(el){
//log('onMouseOver')
},
// 鼠标移出触发按钮
onMouseOut: function(el){
//log('onMouseOut')
},*/
// 上传初始化完成
onInit:function(){
log('onInit');
if (this.options.mode === 'html5') {
if ($.uploader.html5) log('恭喜，您的浏览器支持HTML5方式上传文件！');
else log('抱歉，由于您的浏览器不支持HTML5上传，将自动降级到Flash方式');
} else {
log('您设置了强制使用Flash方式上传！');
}
var o = '当前配置：';
o += this.options.multiple ? '允许多选' : '只能单选';
o += this.options.auto ? '，选择完文件后自动上传' : '，选择完文件后手动上传';
log(o);
log("===============================================");
},
// 选择文件
onSelected: function(filelist){
log('onSelected', filelist);
log("===============================================");
},
// 取消选择文件
onCancel: function(file){
log('onCancel', file);
log("===============================================");
},
// 开始上传
onStart: function(e){
log('onStart', e);
log("===============================================");
},
// 上传进行中
onProgress: function(e){
log('onProgress', e)
log('上传速度：'+ e.speed);
document.getElementById('show_speed').innerHTML = '上传速度：'+ e.speed;
log("===============================================");
},
// 上传发生错误
onError: function(e){
log('onError', e);
log("===============================================");
},
// 上传成功
onSuccess: function(e){
log('onSuccess', e);
log('上传成功！文件地址：'+ e.data);
if (e.file.type === "image/jpeg") previewHTML += '<img src="'+ e.data +'">';
log("===============================================");
log(" ");
},
// 单个文件处理完成（error or success）
onComplete: function(e){
log('onComplete', e);
log("===============================================");
},
// 全部文件处理完成（error or success）
onAllComplete: function(){
log('onAllComplete');
if ( previewHTML ) {
$('#preview').prepend(previewHTML);
previewHTML = '';
}
setTimeout(function(){
document.getElementById('show_speed').innerHTML = '';
}, 2000);
log("===============================================");
},
// 清空队列
onClearQueue: function(){
log('onClearQueue');
log("===============================================");
}
});
});
</script>
</body>
</html>