Skip to content

Commit c6c1666

Browse files
mars-codermars-coder
committed
init repo and add oss pluploder demo
Change-Id: I7221fdf632d2e2968d5f58a2993ec0606e1f5e23
0 parents  commit c6c1666

File tree

6 files changed

+320
-0
lines changed

6 files changed

+320
-0
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.DS_Store

‎examples/custom.html‎

Lines changed: 288 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,288 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
3+
<head>
4+
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
5+
6+
<title>Plupload - Custom example</title>
7+
8+
<!-- production -->
9+
<script type="text/javascript" src="../js/plupload.full.min.js"></script>
10+
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
11+
<script type="text/javascript" src="../js/dateformat.min.js"></script>
12+
<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.7.3.min.js"></script>
13+
14+
</head>
15+
<body style="font: 13px Verdana; background: #eee; color: #333">
16+
17+
<h1>OSS pluploader example</h1>
18+
19+
<p>Shows you how to use the core plupload API.</p>
20+
21+
<div id="filelist">Your browser doesn't have Flash, Silverlight or HTML5 support.</div>
22+
<br />
23+
24+
<div id="container">
25+
<a id="pickfiles" href="javascript:;">[Select files]</a>
26+
<a id="uploadfiles" href="javascript:;">[Upload files]</a>
27+
</div>
28+
29+
<br />
30+
<pre id="console"></pre>
31+
32+
33+
<script type="text/javascript">
34+
// Custom example logic
35+
36+
const g_chunk_size = 1000000
37+
const g_bucket_name = ''
38+
const g_end_point = ''
39+
const g_sts_server = ''
40+
41+
g_sts_id = ''
42+
g_sts_key = ''
43+
g_sts_token = ''
44+
g_part_num = 0
45+
46+
var g_oss_client;
47+
var g_files_init_cnt = 0;
48+
var g_file_list = new Array()
49+
var g_part_map = new Map() // {part_index, part_etag}
50+
var g_file_map = new Map() // {file_name, upload_id}
51+
// to do: same file name problem
52+
53+
54+
function InitUploadParam(up, file, ret) {
55+
g_part_num = 0
56+
g_part_map.clear()
57+
new_multipart_params = {
58+
'success_action_status' : '200', //让服务端返回200,不然，默认会返回204
59+
};
60+
61+
up.setOption({
62+
'url': GetOssRequestUrl(),
63+
'chunk_size': g_chunk_size,
64+
'required_features': "chunks",
65+
'multipart_params': new_multipart_params
66+
});
67+
68+
// up.start();
69+
}
70+
71+
function GetOssRequestUrl(object) {
72+
url = 'https://' + g_bucket_name + "." + g_end_point + "/"
73+
if (object && object != '') {
74+
url += object
75+
}
76+
return url
77+
}
78+
79+
function InitOssClient(id, key) {
80+
g_oss_client = new OSS.Wrapper({
81+
accessKeyId: id,
82+
accessKeySecret: key,
83+
bucket: g_bucket_name,
84+
endpoint: g_end_point
85+
})
86+
}
87+
88+
function InitOssMultipartAndStartUploader(fileName, objectName, uploader) {
89+
// Get UTC date time
90+
var now = new Date();
91+
dateStr = $.format.date(new Date(now.getTime() + now.getTimezoneOffset() * 60000), "E, dd MMM yyyy HH:mm:ss \'GMT\'")
92+
93+
// Init Headers for sign auth and post request
94+
var headers = {
95+
'x-oss-date': dateStr,
96+
'x-oss-security-token': g_sts_token,
97+
'Content-Type': ""
98+
};
99+
100+
resource = "/" + g_bucket_name + "/" + objectName
101+
signAuth = g_oss_client.authorization("POST", resource,
102+
"uploads", headers)
103+
104+
headers["authorization"] = signAuth
105+
console.log("InitOssMultipart headers:", headers)
106+
107+
initMultipartUrl = GetOssRequestUrl(objectName) + "?uploads"
108+
$.ajax({
109+
type: "POST",
110+
headers: headers,
111+
url: initMultipartUrl,
112+
}).done(function(response) {
113+
console.log("Init mp resp:", response)
114+
uploadId = $(response).find("UploadId")[0].textContent
115+
g_files_init_cnt++;
116+
117+
g_file_map.set(fileName, uploadId)
118+
console.log("InitOssMultipart fileName="+fileName+" uploadId="+uploadId+" gUploadId="+g_file_map.get(fileName))
119+
if (g_files_init_cnt == g_file_list.length) {
120+
console.log("uploader start")
121+
uploader.start();
122+
}
123+
}).fail(function(){
124+
alert("InitOssMultipart failed! file="+fileName);
125+
});
126+
}
127+
128+
function CompleteOssMultipart(uploader, file) {
129+
var xml = '<?xml version="1.0" encoding="UTF-8"?>\n<CompleteMultipartUpload>\n';
130+
length = g_part_map.size
131+
for (var i = 1; i <= length; i++) {
132+
xml += '<Part>\n';
133+
xml += '<PartNumber>' + i + '</PartNumber>\n';
134+
xml += '<ETag>' + g_part_map.get(i) + '</ETag>\n';
135+
xml += '</Part>\n';
136+
}
137+
xml += '</CompleteMultipartUpload>';
138+
139+
var now = new Date();
140+
dateStr = $.format.date(new Date(now.getTime() + now.getTimezoneOffset() * 60000),
141+
"E, dd MMM yyyy HH:mm:ss \'GMT\'")
142+
143+
var headers = {
144+
'x-oss-date': dateStr,
145+
'x-oss-security-token': g_sts_token,
146+
'Content-Type': "application/xml"
147+
};
148+
149+
objectName = file.name
150+
uploadId = g_file_map.get(file.name)
151+
resource = "/" + g_bucket_name + "/" + objectName
152+
signAuth = g_oss_client.authorization("POST", resource,
153+
{"uploadId":uploadId},
154+
headers)
155+
156+
headers["authorization"] = signAuth
157+
console.log("CompleteOssMultipart headers:", headers)
158+
159+
completeMultipartUrl = GetOssRequestUrl(objectName) + "?uploadId=" + uploadId
160+
$.ajax({
161+
type: "POST",
162+
headers: headers,
163+
url: completeMultipartUrl,
164+
data: xml,
165+
contentType: 'application/xml',
166+
}).done(function() {
167+
console.log( "upload done" );
168+
}).fail(function(){
169+
alert("CompleteOssMultipart failed!");
170+
});
171+
}
172+
173+
function StartUploader(uploader) {
174+
$.ajax({
175+
type: "GET",
176+
dataType: "json",
177+
url: g_sts_server,
178+
}).done(function(response) {
179+
console.log("Get STS resp:", response);
180+
g_sts_id = response.AccessKeyId
181+
g_sts_key = response.AccessKeySecret
182+
g_sts_token = response.SecurityToken
183+
InitOssClient(g_sts_id, g_sts_key)
184+
var length = g_file_list.length;
185+
for (var i=0; i < length; i++) {
186+
InitOssMultipartAndStartUploader(g_file_list[i].name, g_file_list[i].name, uploader)
187+
}
188+
}).fail(function(){
189+
alert("GetStsAuthInfo failed!");
190+
});
191+
}
192+
193+
function SetPutPartParams(uploader, file) {
194+
var now = new Date();
195+
dateStr = $.format.date(new Date(now.getTime() + now.getTimezoneOffset() * 60000), "E, dd MMM yyyy HH:mm:ss \'GMT\'")
196+
197+
var headers = {
198+
'x-oss-date': dateStr,
199+
'x-oss-security-token': g_sts_token,
200+
'Content-Type': "application/octet-stream"
201+
};
202+
203+
objectName = file.name
204+
uploadId = g_file_map.get(file.name)
205+
resource = "/" + g_bucket_name + "/" + objectName
206+
signAuth = g_oss_client.authorization("PUT", resource,
207+
{"partNumber":g_part_num, "uploadId":uploadId},
208+
headers)
209+
210+
headers["authorization"] = signAuth
211+
console.log("SetPutPartParams headers:", headers)
212+
213+
putPartUrl = GetOssRequestUrl(objectName)+'?partNumber='+g_part_num+'&uploadId='+uploadId
214+
uploader.setOption({
215+
'url': putPartUrl,
216+
'headers': headers,
217+
'http_method': 'PUT',
218+
'multipart': false,
219+
});
220+
}
221+
222+
var uploader = new plupload.Uploader({
223+
runtimes : 'html5,flash,silverlight,html4',
224+
browse_button : 'pickfiles',
225+
container: document.getElementById('container'),
226+
url : 'https://oss-cn-shanghai.aliyuncs.com',
227+
flash_swf_url : '../js/Moxie.swf',
228+
silverlight_xap_url : '../js/Moxie.xap',
229+
230+
filters : {
231+
max_file_size : '10000mb',
232+
},
233+
234+
init: {
235+
PostInit: function() {
236+
document.getElementById('filelist').innerHTML = '';
237+
238+
document.getElementById('uploadfiles').onclick = function() {
239+
console.log("uploadfiles onclick event activated");
240+
StartUploader(uploader)
241+
};
242+
},
243+
244+
FilesAdded: function(up, files) {
245+
g_files_init_cnt = 0
246+
plupload.each(files, function(file) {
247+
document.getElementById('filelist').innerHTML += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></div>';
248+
g_file_list.push(file)
249+
});
250+
},
251+
252+
BeforeUpload: function(up, file) {
253+
console.log("BeforeUpload event activated");
254+
InitUploadParam(up, file, true);
255+
},
256+
257+
BeforeChunkUpload: function(up, file, args, chunkBlob, offset) {
258+
console.log("BeforeChunkUpload event activated");
259+
g_part_num += 1
260+
SetPutPartParams(up, file)
261+
},
262+
263+
ChunkUploaded: function(up, file, info) {
264+
console.log("ChunkUploaded event activated url="+up.getOption('url'));
265+
var respHeaderStr = info.responseHeaders
266+
g_part_map.set(g_part_num, respHeaderStr.split("\"")[1])
267+
},
268+
269+
FileUploaded: function(up, file, resp) {
270+
CompleteOssMultipart(up, file)
271+
console.log("ChunkUploaded event activated url="+up.getOption('url'));
272+
},
273+
274+
UploadProgress: function(up, file) {
275+
document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
276+
},
277+
278+
Error: function(up, err) {
279+
document.getElementById('console').appendChild(document.createTextNode("\nError #" + err.code + ": " + err.message));
280+
}
281+
}
282+
});
283+
284+
uploader.init();
285+
286+
</script>
287+
</body>
288+
</html>

‎js/Moxie.swf‎

26.9 KB
Binary file not shown.

‎js/Moxie.xap‎

64.2 KB
Binary file not shown.

‎js/dateformat.min.js‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎js/plupload.full.min.js‎

Lines changed: 29 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)