添加阿里OSS 服务端签名 web上传 设置上传调样例

pom.xml

@@ -274,6 +274,12 @@
             <artifactId>bcprov-jdk15to18</artifactId>
             <version>1.65</version>
         </dependency>
+        <!-- aliyun -->
+        <dependency>
+            <groupId>com.aliyun.oss</groupId>
+            <artifactId>aliyun-sdk-oss</artifactId>
+            <version>3.10.2</version>
+        </dependency>
 
     </dependencies>
 
@@ -287,7 +293,7 @@
                     <layout>ZIP</layout>
                     <classifier>all</classifier>
                     <!-- 引入devtools后fork为false才能断点,但热部署失败，fork为true时热部署正常，debug失败 -->
-                    <fork>true</fork>
+                    <fork>false</fork>
                 </configuration>
                 <executions>
                     <execution>

src/main/java/com/qkdata/biz/aliyun/config/AliyunConfig.java

+package com.qkdata.biz.aliyun.config;
+
+import lombok.Data;
+import org.springframework.beans.factory.annotation.Value;
+import org.springframework.context.annotation.Configuration;
+
+@Data
+@Configuration
+public class AliyunConfig {
+    @Value("${aliyun.accessKeyId}")
+    private String accessKeyId;
+    @Value("${aliyun.accessKeySecret}")
+    private String accessKeySecret;
+    @Value("${aliyun.oss.endpoint}")
+    private String endpoint;
+    @Value("${aliyun.oss.bucket}")
+    private String bucket;
+}

src/main/java/com/qkdata/biz/aliyun/controller/AliyunApiController.java

+package com.qkdata.biz.aliyun.controller;
+
+import com.qkdata.biz.aliyun.service.AliyunService;
+import com.qkdata.biz.aliyun.vo.AliyunOSSUploadPolicyModel;
+import com.qkdata.common.base.model.Result;
+import io.swagger.annotations.Api;
+import io.swagger.annotations.ApiOperation;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+import java.io.UnsupportedEncodingException;
+
+@Api(tags = "阿里云API")
+@RestController
+@RequestMapping("/api/aliyun/mgr")
+public class AliyunApiController {
+    @Autowired
+    private AliyunService aliyunService;
+
+
+    @ApiOperation("获取阿里云OSS上传所需要的参数")
+    @GetMapping("/uploadPolicy")
+    public Result<AliyunOSSUploadPolicyModel> getUploadPolicy() throws UnsupportedEncodingException {
+        return Result.succeed(aliyunService.getUploadPolicy());
+    }
+}

src/main/java/com/qkdata/biz/aliyun/controller/AliyunOSSCallbackController.java

+package com.qkdata.biz.aliyun.controller;
+
+import com.qkdata.common.annotation.SysLog;
+import io.swagger.annotations.Api;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+@Api(tags = "阿里云OSS callback")
+@RestController
+@RequestMapping("/aliyun")
+public class AliyunOSSCallbackController {
+
+    @SysLog("oss上传回调")
+    @PostMapping("/oss/callback")
+    public String callback(@RequestBody String respData){
+        System.out.println(respData);
+        return "{\"Status\": \"OK\"}";
+    }
+}

src/main/java/com/qkdata/biz/aliyun/service/AliyunService.java

+package com.qkdata.biz.aliyun.service;
+
+import com.alibaba.fastjson.JSONObject;
+import com.aliyun.oss.OSS;
+import com.aliyun.oss.OSSClientBuilder;
+import com.aliyun.oss.common.utils.BinaryUtil;
+import com.aliyun.oss.model.MatchMode;
+import com.aliyun.oss.model.PolicyConditions;
+import com.qkdata.biz.aliyun.config.AliyunConfig;
+import com.qkdata.biz.aliyun.vo.AliyunOSSUploadPolicyModel;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.beans.factory.annotation.Value;
+import org.springframework.stereotype.Service;
+
+import javax.annotation.PostConstruct;
+import java.io.UnsupportedEncodingException;
+import java.util.Date;
+
+@Service
+public class AliyunService {
+    @Autowired
+    private AliyunConfig aliyunConfig;
+    @Value("${frontend.domain}")
+    private String frontendDomain;
+    @Value("${server.servlet.context-path}")
+    private String serverContextPath;
+    private OSS ossClient;
+    /**
+     * 过期时间（秒）
+     */
+    private long expireTime = 60;
+
+    @PostConstruct
+    private void init(){
+        if (ossClient == null){
+            ossClient = new OSSClientBuilder().build(aliyunConfig.getEndpoint(),aliyunConfig.getAccessKeyId(),aliyunConfig.getAccessKeySecret());
+        }
+    }
+
+    public AliyunOSSUploadPolicyModel getUploadPolicy() throws UnsupportedEncodingException {
+        long expireEndTime = System.currentTimeMillis() + expireTime * 1000;
+        Date expiration = new Date(expireEndTime);
+        PolicyConditions policyConditions = new PolicyConditions();
+        policyConditions.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE, 0, 1048576000);
+        policyConditions.addConditionItem(MatchMode.StartWith, PolicyConditions.COND_KEY, "");
+
+        String postPolicy = ossClient.generatePostPolicy(expiration,policyConditions);
+        byte[] binaryData = postPolicy.getBytes("utf-8");
+        String encodedPolicy = BinaryUtil.toBase64String(binaryData);
+        String postSignature = ossClient.calculatePostSignature(postPolicy);
+
+        AliyunOSSUploadPolicyModel model = new AliyunOSSUploadPolicyModel();
+        model.setAccessId(aliyunConfig.getAccessKeyId());
+        model.setPolicy(encodedPolicy);
+        model.setSignature(postSignature);
+        model.setHost("https://" + aliyunConfig.getBucket() + "." + aliyunConfig.getEndpoint());
+        model.setExpire(String.valueOf(expireEndTime / 1000));
+        model.setDir("");
+
+        JSONObject jsonCallback = new JSONObject();
+        jsonCallback.put("callbackUrl",frontendDomain + serverContextPath + "/aliyun/oss/callback");
+        jsonCallback.put("callbackBody","{\n" +
+                "    \"bucket\": \"${bucket}\",\n" +
+                "    \"fileName\": \"${object}\",\n" +
+                "    \"etag\": \"${etag}\",\n" +
+                "    \"size\": \"${size}\",\n" +
+                "    \"mimeType\": \"${mimeType}\",\n" +
+                "    \"imageHeight\": \"${imageInfo.height}\",\n" +
+                "    \"imageWidth\": \"${imageInfo.width}\",\n" +
+                "    \"imageFormat\": \"${imageInfo.format}\"\n" +
+                "}");
+        jsonCallback.put("callbackBodyType","application/json");
+        String base64CallbackBody = BinaryUtil.toBase64String(jsonCallback.toString().getBytes());
+        model.setCallback(base64CallbackBody);
+        return model;
+    }
+}

src/main/java/com/qkdata/biz/aliyun/vo/AliyunOSSUploadPolicyModel.java

+package com.qkdata.biz.aliyun.vo;
+
+import lombok.Data;
+
+@Data
+public class AliyunOSSUploadPolicyModel {
+    private String accessId;
+    private String policy;
+    private String signature;
+    private String host;
+    private String expire;
+    private String callback;
+    private String dir;
+}

src/main/resources/application-dev.yml

@@ -11,7 +11,8 @@ spring:
   redis:
     host: localhost
     port: 6379
-
+frontend:
+  domain: http://test2.qiankundata.com:60081
 log:
   path: /Users/liuyang/work/argus_work/online-edu/data/logs
 file:

src/main/resources/application.yml

@@ -88,6 +88,7 @@ jwt:
   exclude-urls:
     - /api/wx/user/**
     - /api/sys/login
+    - /api/aliyun/mgr/uploadPolicy #test
   aud: qkdata
   exp: 720 #24*30 30天
 
@@ -102,3 +103,9 @@ wx:
 sms:
   api:
     v3: http://sms-service/sms/api/v3
+aliyun:
+    accessKeyId: LTAI4GCTRFRxud86a58AoV3X
+    accessKeySecret: Rpwj9DBwJpNWzwjcFeffLWqEuJ56i0
+    oss:
+      endpoint: oss-cn-beijing.aliyuncs.com
+      bucket: qkdata-online-edu
\ No newline at end of file

src/main/resources/static/.htaccess

+<IfModule mod_rewrite.c>
+RewriteEngine on
+RewriteCond %{HTTP:Authorization} .
+RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization},last]
+</IfModule>
\ No newline at end of file

src/main/resources/static/index.html

+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
+	<title>OSS web直传</title>
+	<link rel="stylesheet" type="text/css" href="style.css"/>
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+</head>
+<body>
+
+<h2>OSS web直传---在服务端php签名, OSS会在文件上传成功，回调用户设置的回调url</h2>
+<ol>
+<li>基于plupload封装 </li>
+<li>支持html5,flash,silverlight,html4 等协议上传</li>
+<li>可以运行在PC浏览器，手机浏览器，微信</li>
+<li>签名在服务端(php)完成, 安全可靠, 推荐使用!</li>
+<li>显示上传进度条</li>
+<li>可以控制上传文件的大小,允许上传文件的类型,本例子设置了，只能上传jpg,png,gif结尾和zip,rar文件，最大大小是10M</li>
+<li>最关键的是，让你10分钟之内就能移植到你的系统，实现以上牛逼的功能！</li>
+<li>注意一点:bucket必须设置了Cors(Post打勾）,不然没有办法上传</li>
+<li>注意一点:此例子默认是上传到user-dir目录下面，这个目录的设置是在php/get.php, $dir变量!</li>
+<li>注意一点:把php/get.php里面的callbackUrl变量改成你自己的url</li>
+<li>注意一点:这里返回的success,是OSS已经回调应用服务器，应用服务已经返回200!</li>
+<li><a href="https://help.aliyun.com/document_detail/oss/practice/pc_web_upload/js_php_callback.html">点击查看详细文档</a></li>
+</ol>
+<br>
+<form name=theform>
+<input type="radio" name="myradio" value="local_name" checked=true/> 上传文件名字保持本地文件名字
+<input type="radio" name="myradio" value="random_name" /> 上传文件名字是随机文件名, 后缀保留
+</form>
+
+<h4>您所选择的文件列表：</h4>
+<div id="ossfile">你的浏览器不支持flash,Silverlight或者HTML5！</div>
+
+<br/>
+
+
+<div id="container">
+	<a id="selectfiles" href="javascript:void(0);" class='btn'>选择文件</a>
+	<a id="postfiles" href="javascript:void(0);" class='btn'>开始上传</a>
+</div>
+
+<pre id="console"></pre>
+
+<p>&nbsp;</p>
+
+</body>
+<script type="text/javascript" src="lib/plupload-2.1.2/js/plupload.full.min.js"></script>
+<script type="text/javascript" src="upload.js"></script>
+</html>

src/main/resources/static/lib/plupload-2.1.2/readme.md

+# Plupload
+
+Plupload is a cross-browser multi-runtime file uploading API. Basically, a set of tools that will help you to 
+build a reliable and visually appealing file uploader in minutes.
+
+Historically, Plupload comes from a dark and hostile age of no HTML5, hence all the alternative fallbacks, 
+like Flash, Silverlight and Java (still in development). It is meant to provide an API, that 
+will work anywhere and in any case, in one way or another. While having very solid fallbacks, Plupload 
+is built with the future of HTML5 in mind.
+
+### Table of Contents
+* [Backstory](https://github.com/moxiecode/plupload/blob/master/readme.md#backstory)
+* [Structure](https://github.com/moxiecode/plupload/blob/master/readme.md#structure)
+  * [File API and XHR L2 pollyfills](https://github.com/moxiecode/moxie/blob/master/README.md)
+  * [Plupload API](https://github.com/moxiecode/plupload/wiki/API)
+  * [UI Widget](https://github.com/moxiecode/plupload/wiki/UI.Plupload)
+  * [Queue Widget](https://github.com/moxiecode/plupload/wiki/pluploadQueue)
+* [Demos](https://github.com/jayarjo/plupload-demos/blob/master/README.md)
+* [Building Instructions](https://github.com/moxiecode/plupload/blob/master/readme.md#build)
+* [Getting Started](https://github.com/moxiecode/plupload/wiki/Getting-Started)
+  * [Options](https://github.com/moxiecode/plupload/wiki/Options)
+  * [Events](https://github.com/moxiecode/plupload/wiki/Uploader#wiki-events)
+  * [Methods](https://github.com/moxiecode/plupload/wiki/Uploader#wiki-methods)
+  * [Plupload in Your Language](https://github.com/moxiecode/plupload/wiki/Plupload-in-Your-Language)
+  * [File Filters](https://github.com/moxiecode/plupload/wiki/File-Filters) 
+  * [Image Resizing on Client-Side](https://github.com/moxiecode/plupload/wiki/Image-Resizing-on-Client-Side) 
+  * [Chunking](https://github.com/moxiecode/plupload/wiki/Chunking) 
+  * [Upload to Amazon S3](https://github.com/moxiecode/plupload/wiki/Upload-to-Amazon-S3) 
+* [FAQ](https://github.com/moxiecode/plupload/wiki/Frequently-Asked-Questions)
+* [Support](https://github.com/moxiecode/plupload/blob/master/readme.md##support)
+  * [Create a Fiddle](https://github.com/moxiecode/plupload/wiki/Create-a-Fiddle)
+* [Contributing](https://github.com/moxiecode/plupload/blob/master/readme.md#contribute)
+* [License](https://github.com/moxiecode/plupload/blob/master/readme.md#license)
+* [Contact Us](http://www.moxiecode.com/contact.php)
+
+<a name="backstory" />
+### Backstory
+
+Plupload started in a time when uploading a file in a responsive and customizable manner was a real pain. 
+Internally, browsers only had the `input[type="file"]` element. It was ugly and clunky at the same time. 
+One couldn't even change it's visuals, without hiding it and coding another one on top of it from scratch. 
+And then there was no progress indication for the upload process... Sounds pretty crazy today.
+
+It was very logical for developers to look for alternatives and writing their own implementations, using 
+Flash and Java, in order to somehow extend limited browser capabilities. And so did we, in our search for 
+a reliable and flexible file uploader for 
+our [TinyMCE](http://www.tinymce.com/index.php)'s
+[MCImageManager](http://www.tinymce.com/enterprise/mcimagemanager.php). 
+
+Quickly enough though, Plupload grew big.  It easily split into a standalone project. 
+With major *version 2.0* it underwent another huge reconstruction, basically 
+[from the ground up](http://blog.moxiecode.com/2012/11/28/first-public-beta-plupload-2/), 
+as all the low-level runtime logic has been extracted into separate [File API](http://www.w3.org/TR/FileAPI/) 
+and [XHR L2](http://www.w3.org/TR/XMLHttpRequest/) pollyfills (currently known under combined name of [mOxie](https://github.com/moxiecode/moxie)), 
+giving Plupload a chance to evolve further.
+
+<a name="structure" />
+### Structure
+
+Currently, Plupload may be considered as consisting of three parts: low-level pollyfills, 
+Plupload API and Widgets (UI and Queue). Initially, Widgets were meant only to serve as examples 
+of the API, but quickly formed into fully-functional API implementations that now come bundled with 
+the Plupload API. This has been a source for multiple misconceptions about the API as Widgets were 
+easily mistaken for the Plupload itself. They are only implementations, such as any of you can 
+build by yourself out of the API.
+
+* [Low-level pollyfills (mOxie)](https://github.com/moxiecode/moxie) - have their own [code base](https://github.com/moxiecode/moxie) and [documentation](https://github.com/moxiecode/moxie/wiki) on GitHub.
+* [Plupload API](https://github.com/moxiecode/plupload/wiki/API)
+* [UI Widget](https://github.com/moxiecode/plupload/wiki/UI.Plupload)
+* [Queue Widget](https://github.com/moxiecode/plupload/wiki/pluploadQueue)
+
+<a name="build" />
+### Building instructions
+
+Plupload depends on File API and XHR2 L2 pollyfills that currently have their 
+[own repository](https://github.com/moxiecode/moxie) on GitHub. However, in most cases you shouldn't 
+care as we bundle the latest build of mOxie, including full and minified JavaScript source and 
+pre-compiled `SWF` and `XAP` components, with [every release](https://github.com/moxiecode/plupload/releases). You can find everything you may need under `js/` folder.
+
+There are cases where you might need a custom build, for example free of unnecessary runtimes, half the 
+original size, etc. The difficult part of this task comes from mOxie and its set of additional runtimes 
+that require special tools on your workstation in order to compile. 
+Consider [build instructions for mOxie](https://github.com/moxiecode/moxie#build-instructions) - 
+everything applies to Plupload as well.
+
+First of all, if you want to build custom Plupload packages you will require [Node.js](http://nodejs.org/), 
+as this is our build environment of choice. Node.js binaries (as well as Source)
+[are available](http://nodejs.org/download/) for all major operating systems.
+
+Plupload includes _mOxie_ as a submodule, it also depends on some other repositories for building up it's dev
+environment - to avoid necessity of downloading them one by one, we recommended you to simply clone Plupload 
+with [git](http://git-scm.com/) recursively (you will require git installed on your system for this operation 
+to succeed):
+
+```
+git clone --recursive https://github.com/moxiecode/plupload.git
+```
+
+And finalize the preparation stage with: `npm install` - this will install all additional modules, including those
+required by dev and test environments. In case you would rather keep it minimal, add a `--production` flag.
+
+*Note:* Currently, for an unknown reason, locally installed Node.js modules on Windows, may not be automatically 
+added to the system PATH. So, if `jake` commands below are not recognized you will need to add them manually:
+
+```
+set PATH=%PATH%;%CD%\node_modules\.bin\
+``` 
+
+<a name="support" />
+### Support
+
+We are actively standing behind the Plupload and now that we are done with major rewrites and refactoring,
+the only real goal that we have ahead is making it as reliable and bulletproof as possible. We are open to 
+all the suggestions and feature requests. We ask you to file bug reports if you encounter any. We may not 
+react to them instantly, but we constantly bear them in my mind as we extend the code base.
+
+In addition to dedicated support for those who dare to buy our OEM licenses, we got 
+[discussion boards](http://www.plupload.com/punbb/index.php), which is like an enormous FAQ, 
+covering every possible application case. Of course, you are welcome to file a bug report or feature request, 
+here on [GitHub](https://github.com/moxiecode/plupload/issues).
+
+Sometimes it is easier to notice the problem when bug report is accompained by the actual code. Consider providing 
+[a Plupload fiddle](https://github.com/moxiecode/plupload/wiki/Create-a-Fiddle) for the troublesome code.
+
+<a name="contribute" />
+### Contributing
+
+We are open to suggestions and code revisions, however there are some rules and limitations that you might 
+want to consider first.
+
+* Code that you contribute will automatically be licensed under the LGPL, but will not be limited to LGPL.
+* Although all contributors will get the credit for their work, copyright notices will be changed to [Moxiecode Systems AB](http://www.moxiecode.com/).
+* Third party code will be reviewed, tested and possibly modified before being released.
+
+These basic rules help us earn a living and ensure that code remains Open Source and compatible with LGPL license. All contributions will be added to the changelog and appear in every release and on the site. 
+
+An easy place to start is to [translate Plupload to your language](https://github.com/moxiecode/plupload/wiki/Plupload-in-Your-Language#contribute).
+
+You can read more about how to contribute at: [http://www.plupload.com/contributing](http://www.plupload.com/contributing)
+
+<a name="license" />
+### License
+
+Copyright 2013, [Moxiecode Systems AB](http://www.moxiecode.com/)  
+Released under [GPLv2 License](https://github.com/moxiecode/plupload/blob/master/license.txt).
+
+We also provide [commercial license](http://www.plupload.com/commercial.php).

src/main/resources/static/style.css

+
+	.btn{
+        color: #fff;
+	    background-color: #337ab7;
+	    border-color: #2e6da4; 
+	    display: inline-block;
+	    padding: 6px 12px;
+	    margin-bottom: 0;
+	    font-size: 14px;
+	    font-weight: 400;
+	    line-height: 1.42857143;
+	    text-align: center;
+	    white-space: nowrap;
+	    text-decoration: none;
+	    vertical-align: middle;
+	    -ms-touch-action: manipulation;
+	    touch-action: manipulation;
+	    cursor: pointer;
+	    -webkit-user-select: none;
+	    -moz-user-select: none;
+	    -ms-user-select: none;
+	    user-select: none;
+	    background-image: none;
+	    border: 1px solid transparent;
+	    border-radius: 4px;
+	}
+	a.btn:hover{
+      background-color: #3366b7;
+	}
+	.progress{
+		margin-top:2px;
+	    width: 200px;
+	    height: 14px;
+	    margin-bottom: 10px;
+	    overflow: hidden;
+	    background-color: #f5f5f5;
+	    border-radius: 4px;
+	    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
+	    box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
+	}
+	.progress-bar{ 
+		background-color: rgb(92, 184, 92);
+		background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.14902) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.14902) 50%, rgba(255, 255, 255, 0.14902) 75%, transparent 75%, transparent);
+		background-size: 40px 40px;
+		box-shadow: rgba(0, 0, 0, 0.14902) 0px -1px 0px 0px inset;
+		box-sizing: border-box;
+		color: rgb(255, 255, 255);
+		display: block;
+		float: left; 
+		font-size: 12px;
+		height: 20px;
+		line-height: 20px;
+		text-align: center;
+		transition-delay: 0s;
+		transition-duration: 0.6s;
+		transition-property: width;
+		transition-timing-function: ease;
+		width: 266.188px;
+	}
\ No newline at end of file

src/main/resources/static/upload.js

+
+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是 用户获取 '签名和Policy' 等信息的应用服务器的URL，请将下面的IP和Port配置为您自己的真实信息。
+        serverUrl = 'http://localhost:9090/online-edu-backend/api/aliyun/mgr/uploadPolicy'
+		
+        xmlhttp.open( "GET", serverUrl, false );
+        xmlhttp.send( null );
+        return xmlhttp.responseText
+    }
+    else
+    {
+        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 + ")");
+        obj = obj['datas']
+        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 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文件
+//        { title : "Image files", extensions : "jpg,gif,png,bmp" },
+//        { title : "ppt 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;
+			};
+		},
+
+		FilesAdded: function(up, files) {
+			plupload.each(files, function(file) {
+				document.getElementById('ossfile').innerHTML += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ')<b></b>'
+				+'<div class="progress"><div class="progress-bar" style="width: 0%"></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 = 'upload to oss success, object name:' + get_uploaded_object_name(file.name) + ' 回调服务器返回的内容是:' + info.response;
+            }
+            else if (info.status == 203)
+            {
+                document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '上传到OSS成功，但是oss访问用户设置的上传回调服务器失败，失败原因是:' + info.response;
+            }
+            else
+            {
+                document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = info.response;
+            } 
+		},
+
+		Error: function(up, err) {
+            if (err.code == -600) {
+                document.getElementById('console').appendChild(document.createTextNode("\n选择的文件太大了,可以根据应用情况，在upload.js 设置一下上传的最大大小"));
+            }
+            else if (err.code == -601) {
+                document.getElementById('console').appendChild(document.createTextNode("\n选择的文件后缀不对,可以根据应用情况，在upload.js进行设置可允许的上传文件类型"));
+            }
+            else if (err.code == -602) {
+                document.getElementById('console').appendChild(document.createTextNode("\n这个文件已经上传过一遍了"));
+            }
+            else 
+            {
+                document.getElementById('console').appendChild(document.createTextNode("\nError xml:" + err.response));
+            }
+		}
+	}
+});
+
+uploader.init();