0.4: Add example: custom-signature.html

guo-yu · guo-yu · commit d32f02759916 · 2015-01-04T20:32:16.000+08:00
diff --git a/examples/native-custom-signature.html b/examples/native-custom-signature.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>又拍云表单上传工具 | upyun form uploader</title>
+  <link rel="stylesheet" href="./style.css">
+  <script src="../dist/upyun.min.js"></script>
+</head>
+<body>
+  <div class="wrapper">
+    <h2>又拍云表单上传演示 <span>Native javascript</span></h2>
+    <div id="preview" class="preview"></div>
+    <form name="uploadForm" role="form">
+      <input type="file" name="file">
+      <a class="submit" id="submitToUpyun" onclick="upload();">Upload</a>
+    </form>
+  </div>
+  <script>
+    // just for demo !!!
+    // this bucket has a upload limit
+    upyun.set('policy','eyJmb3JtX2FwaV9zZWNyZXQiOiJJUm9UeU5jNzVodXNmUUQyNGNxMGJObVJTREk9IiwiYnVja2V0IjoidXB5dW4tZm9ybSIsImV4cGlyYXRpb24iOjE0MjAzNzQ0ODU1NjgsInNhdmUta2V5IjoiL3t5ZWFyfS97bW9ufS97ZGF5fS91cGxvYWRfe2ZpbGVtZDV9ey5zdWZmaXh9IiwiYWxsb3ctZmlsZS10eXBlIjoianBnLGpwZWcsZ2lmLHBuZyJ9');
+    upyun.set('signature', 'd1eb1c203c1bc847cc555442cf99d6ef');
+    // track uploading progress
+    upyun.on('uploading', function(progress) {
+      console.log('上传进度 ' + progress + '%');
+      document.getElementById('submitToUpyun').innerText = 
+        progress === 100 ?
+        '上传完成' :
+        '上传进度 ' + progress + '%';
+    });
+    // upload method
+    function upload() {
+      console.log('正在开始上传...');
+      upyun.upload('uploadForm', function(err, response, image){
+        if (err) console.error(err);
+        console.log('返回信息：');
+        console.log(response);
+        console.log('图片信息：');
+        console.log(image);
+        if (image.code === 200 && image.message === 'ok') {
+          document.getElementById('preview').innerHTML = [
+            '<img alt="" src="',
+              image.absUrl,
+            '" />'
+          ].join('\n');
+        }
+      });
+      return false;
+    }
+  </script>
+</body>
+</html>
