accessid = '' accesskey = '' host = '' policyBase64 = '' signature = '' callbackbody = '' filename = '' key = '' expire = 0 g_object_name = '' g_object_name_type = '' now = timestamp = Date.parse(new Date()) / 1000; function send_request() { var xmlhttp = null; if(window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else if(window.ActiveXObject) { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } if(xmlhttp != null) { serverUrl = '../php/get.php' xmlhttp.open("GET", serverUrl, false); xmlhttp.send(null); return xmlhttp.responseText } else { mui.alert("Your browser does not support XMLHTTP."); } }; function check_object_radio() { var tt = document.getElementsByName('myradio'); for(var i = 0; i < tt.length; i++) { if(tt[i].checked) { g_object_name_type = tt[i].value; break; } } } function get_signature() { //可以判断当前expire是否超过了当前时间,如果超过了当前时间,就重新取一下.3s 做为缓冲 now = timestamp = Date.parse(new Date()) / 1000; if(expire < now + 3) { body = send_request() var obj = eval("(" + body + ")"); host = obj['host'] policyBase64 = obj['policy'] accessid = obj['accessid'] signature = obj['signature'] expire = parseInt(obj['expire']) callbackbody = obj['callback'] key = obj['dir'] return true; } return false; }; function random_string(len) { len = len || 32; var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'; var maxPos = chars.length; var pwd = ''; for(i = 0; i < len; i++) { pwd += chars.charAt(Math.floor(Math.random() * maxPos)); } return pwd; } function get_suffix(filename) { pos = filename.lastIndexOf('.') suffix = '' if(pos != -1) { suffix = filename.substring(pos) } return suffix; } function calculate_object_name(filename) { if(g_object_name_type == 'local_name') { g_object_name += "${filename}" } else if(g_object_name_type == 'random_name') { suffix = get_suffix(filename) g_object_name = key + random_string(10) + suffix } return '' } function get_uploaded_object_name(filename) { if(g_object_name_type == 'local_name') { tmp_name = g_object_name tmp_name = tmp_name.replace("${filename}", filename); return tmp_name } else if(g_object_name_type == 'random_name') { return g_object_name } } function set_upload_param(up, filename, ret) { if(ret == false) { ret = get_signature() } g_object_name = key; if(filename != '') { suffix = get_suffix(filename) calculate_object_name(filename) } new_multipart_params = { 'key': g_object_name, 'policy': policyBase64, 'OSSAccessKeyId': accessid, 'success_action_status': '200', //让服务端返回200,不然,默认会返回204 'callback': callbackbody, 'signature': signature, }; up.setOption({ 'url': host, 'multipart_params': new_multipart_params }); up.start(); } var html = ''; for(i = 0; i < 3; i++) { html += '<div class="up_out"><div id="ossfile' + i + '" class="ossfile clearfix" data-num="' + i + '">你的浏览器不支持flash,Silverlight或者HTML5!</div><div id="container' + i + '" class="container" data-num="' + i + '"><a id="selectfiles' + i + '" href="javascript:void(0);" class="btn selectfiles" data-num="' + i + '">选择文件</a></div></div>' } $('.con').html(html) var btnArr = []; $('.selectfiles').each(function(num) { btnArr.push($(this).attr('id')); }) $.each(btnArr, function(i, n) { var self = this.toString(); var that = document.getElementById(this); var uploader = new plupload.Uploader({ runtimes: 'html5,flash,silverlight,html4', browse_button: self, //multi_selection: false, // container: document.getElementById('container'), flash_swf_url: '../lib/plupload-2.1.2/js/Moxie.swf', silverlight_xap_url: '../lib/plupload-2.1.2/js/Moxie.xap', url: 'http://oss.aliyuncs.com', filters: { mime_types: [ //只允许上传图片和zip,rar文件 { title: "Image files", extensions: "jpg,gif,png,bmp" }, { title: "Zip files", extensions: "zip,rar" } ], max_file_size: '10mb', //最大只能上传10mb的文件 prevent_duplicates: true //不允许选取重复文件 }, init: { PostInit: function() { document.getElementsByClassName('ossfile')[i].innerHTML = ''; // document.getElementById('postfiles').onclick = function() { // set_upload_param(uploader, '', false); // return false; // }; uploader.bind('FilesAdded', function() { set_upload_param(uploader, '', false); return false; }); }, FilesAdded: function(up, files) { plupload.each(files, function(file) { document.getElementsByClassName('ossfile')[i].innerHTML += '<div class="files_out" id="' + file.id + '"><b></b>' + '<div class="progress"><div class="progress-bar" style="width: 60px"></div></div>' + '</div>'; }); }, BeforeUpload: function(up, file) { check_object_radio(); set_upload_param(up, file.name, true); }, UploadProgress: function(up, file) { var d = document.getElementById(file.id); d.getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>"; var prog = d.getElementsByTagName('div')[0]; var progBar = prog.getElementsByTagName('div')[0] progBar.style.width = 2 * file.percent + 'px'; progBar.setAttribute('aria-valuenow', file.percent); }, FileUploaded: function(up, file, info) { if(info.status == 200) { document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<img data-src="' + get_uploaded_object_name(file.name) + '" src="http://heyuanhui.oss-cn-qingdao.aliyuncs.com/' + get_uploaded_object_name(file.name) + '" />'; } else { document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = info.response; } }, Error: function(up, err) { if(err.code == -600) { mui.alert("\n选择的文件太大了"); } else if(err.code == -601) { mui.alert("\n选择的文件后缀不对"); } else if(err.code == -602) { mui.alert("\n这个文件已经上传过一遍了"); } else { mui.alert("\nError xml:" + err.response); } } } }); uploader.init(); }); var uploader = new plupload.Uploader({ runtimes: 'html5,flash,silverlight,html4', browse_button: 'selectfiles', //multi_selection: false, // container: document.getElementById('container'), flash_swf_url: '../lib/plupload-2.1.2/js/Moxie.swf', silverlight_xap_url: '../lib/plupload-2.1.2/js/Moxie.xap', url: 'http://oss.aliyuncs.com', filters: { mime_types: [ //只允许上传图片和zip,rar文件 { title: "Image files", extensions: "jpg,gif,png,bmp" }, { title: "Zip files", extensions: "zip,rar" } ], max_file_size: '10mb', //最大只能上传10mb的文件 prevent_duplicates: true //不允许选取重复文件 }, init: { PostInit: function() { document.getElementById('ossfile').innerHTML = ''; // document.getElementById('postfiles').onclick = function() { // set_upload_param(uploader, '', false); // return false; // }; uploader.bind('FilesAdded', function() { set_upload_param(uploader, '', false); return false; }); }, FilesAdded: function(up, files) { plupload.each(files, function(file) { document.getElementById('ossfile').innerHTML += '<div class="files_out" id="' + file.id + '"><b></b>' + '<div class="progress"><div class="progress-bar" style="width: 60px"></div></div>' + '</div>'; }); }, BeforeUpload: function(up, file) { check_object_radio(); set_upload_param(up, file.name, true); }, UploadProgress: function(up, file) { var d = document.getElementById(file.id); d.getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>"; var prog = d.getElementsByTagName('div')[0]; var progBar = prog.getElementsByTagName('div')[0] progBar.style.width = 2 * file.percent + 'px'; progBar.setAttribute('aria-valuenow', file.percent); }, FileUploaded: function(up, file, info) { if(info.status == 200) { document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<img src="http://heyuanhui.oss-cn-qingdao.aliyuncs.com/' + get_uploaded_object_name(file.name) + '" />'; } else { document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = info.response; } }, Error: function(up, err) { if(err.code == -600) { mui.alert("\n选择的文件太大了"); } else if(err.code == -601) { mui.alert("\n选择的文件后缀不对"); } else if(err.code == -602) { mui.alert("\n这个文件已经上传过一遍了"); } else { mui.alert("\nError xml:" + err.response); } } } }); uploader.init();