Skip to content

Commit 8430b32

Browse files
luoyeshu0507luoyeshu0507
committed
add formdata demo and modify readme.md
1 parent 2d78f18 commit 8430b32

File tree

12 files changed

+230
-22
lines changed

12 files changed

+230
-22
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,4 @@
22
node_modules
33
bower_components
44
demo/config.js
5+
demo/deploy.sh

‎README.md‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,12 @@ Qiniu-JavaScript-SDK
1414

1515
Qiniu-JavaScript-SDK （下文简称为 JS-SDK）适用于 IE8+、Chrome、Firefox、Safari 等浏览器，基于七牛云存储官方 API 构建，其中上传功能基于 [Plupload](http://www.plupload.com/) 插件封装。开发者基于 JS-SDK 可以方便的从浏览器端上传文件至七牛云存储，并对上传成功后的图片进行丰富的数据处理操作。
1616

17+
不考虑兼容性的情况下，如手机端，建议直接使用 Formdata 结合七牛[表单上传](https://developer.qiniu.com/kodo/manual/form-upload)的方式上传文件。
18+
19+
[ Formdata 上传 demo ](http://jssdk.demo.qiniu.io/formdata)
20+
21+
![ Formdata ](http://oky1vwhqm.bkt.clouddn.com/1486368013.png)
22+
1723
Qiniu-JavaScript-SDK 为客户端 SDK，没有包含 token 生成实现，为了安全，token 建议通过网络从服务端获取，具体生成代码可以参考以下服务端 SDK 的文档。
1824

1925
- [Java](http://developer.qiniu.com/code/v7/sdk/android.html)
@@ -190,7 +196,7 @@ Qiniu-JavaScript-SDK 的示例 Demo 中的服务器端部分是基于[ Node.js
190196
// Ajax请求downToken的Url，私有空间时使用,JS-SDK 将向该地址POST文件的key和domain,服务端返回的JSON必须包含`url`字段，`url`值为该文件的下载地址
191197
// unique_names: true, // 默认 false，key 为文件名。若开启该选项，JS-SDK 会为每个文件自动生成key（文件名）
192198
// save_key: true, // 默认 false。若在服务端生成 uptoken 的上传策略中指定了 `sava_key`，则开启，SDK在前端将不对key进行任何处理
193-
domain: '<Your bucket domain>', // bucket 域名，下载资源时用到，**必需**
199+
domain: '<Your bucket domain>', // bucket 域名，下载资源时用到，如：'http://xxx.bkt.clouddn.com/' **必需**
194200
container: 'container', // 上传区域 DOM ID，默认是 browser_button 的父元素，
195201
max_file_size: '100mb', // 最大文件体积限制
196202
flash_swf_url: 'path/of/plupload/Moxie.swf', //引入 flash,相对路径
@@ -449,7 +455,7 @@ Qiniu-JavaScript-SDK 的示例 Demo 中的服务器端部分是基于[ Node.js
449455
<a id="demo"></a>
450456
### 运行示例
451457
452-
1. 进入项目根目录，执行 `make install` 安装依赖第三方库
458+
1. 进入项目根目录，执行 `make install` 或 `npm install & bower install` 安装依赖第三方库
453459
2. 进入 `demo` 目录，按照目录下的 `config.example` 示例，创建 `config.js` 文件，其中，`Access Key` 和 `Secret Key` 按如下方式获取
454460
455461
* [开通七牛开发者帐号](https://portal.qiniu.com/signup)
@@ -463,11 +469,11 @@ Qiniu-JavaScript-SDK 的示例 Demo 中的服务器端部分是基于[ Node.js
463469
'Bucket_Name': '<Your Bucket Name>',
464470
'Port': 19110,
465471
'Uptoken_Url': '<Your Uptoken_Url>', // demo 启动后会在本地 /uptoken 上提供获取 uptoken 的接口，所以这里可以填 'uptoken'
466-
'Domain': '<Your Bucket Domain>'
472+
'Domain': '<Your Bucket Domain>' // Bucket 的外链默认域名，在 Bucket 的内容管理里查看，如：'http://xxx.bkt.clouddn.com/'
467473
}
468474
469475
```
470-
3. 进入项目根目录，执行 `make dev` 访问 `http://127.0.0.1:19110/` 或 `http://localhost:19110/`
476+
3. 进入项目根目录，执行 `make dev` 或 `node demo/server.js` 访问命令行打印出的 demo 地址。
471477
472478
<a id="note"></a>
473479
### 说明

‎demo/config.js.example‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
module.exports = {
2-
'ACCESS_KEY': '<Your Access Key>',
2+
'ACCESS_KEY': '<Your Access Key>', // https://portal.qiniu.com/user/key
33
'SECRET_KEY': '<Your Secret Key>',
44
'Bucket_Name': '<Your Bucket Name>',
55
'Port': 19110,
66
'Uptoken_Url': 'uptoken',
7-
'Domain': 'http://qiniu-plupload.qiniudn.com/'
7+
'Domain': '<Your Bucket Name>' // bucket domain eg:http://qiniu-plupload.qiniudn.com/
88
};

‎demo/scripts/formdata.js‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
// jQuery zepto vue angular 等库皆有 progress 的实现 以jQuery为例：
2+
$(function(){
3+
var $key = $('#key'); // file name eg: the file is image.jpg,but $key='a.jpg', you will upload the file named 'a.jpg'
4+
var $userfile = $('#userfile'); // the file you selected
5+
6+
// upload info
7+
var $selectedFile = $('.selected-file');
8+
var $progress = $(".progress");
9+
var $uploadedResult = $('.uploaded-result');
10+
11+
$("#userfile").change(function() { // you can ues 'onchange' here to uplpad automatically after select a file
12+
$uploadedResult.html('');
13+
var selectedFile = $userfile.val();
14+
if (selectedFile) {
15+
// randomly generate the final file name
16+
var ramdomName = Math.random().toString(36).substr(2) + $userfile.val().match(/\.?[^.\/]+$/);
17+
$key.val(ramdomName);
18+
$selectedFile.html('文件：' + selectedFile);
19+
} else {
20+
return false;
21+
}
22+
var f = new FormData(document.getElementById("testform"));
23+
$.ajax({
24+
url: 'http://upload.qiniu.com/', // Different bucket zone has different upload url, you can get right url by the browser error massage when uploading a file with wrong upload url.
25+
type: 'POST',
26+
data: f,
27+
processData: false,
28+
contentType: false,
29+
xhr: function(){
30+
myXhr = $.ajaxSettings.xhr();
31+
if(myXhr.upload){
32+
myXhr.upload.addEventListener('progress',function(e) {
33+
// console.log(e);
34+
if (e.lengthComputable) {
35+
var percent = e.loaded/e.total*100;
36+
$progress.html('上传：' + e.loaded + "/" + e.total+" bytes. " + percent.toFixed(2) + "%");
37+
}
38+
}, false);
39+
}
40+
return myXhr;
41+
},
42+
success: function(res) {
43+
console.log("成功：" + JSON.stringify(res));
44+
var str = '<span>已上传：' + res.key + '</span>';
45+
if (res.key && res.key.match(/\.(jpg|jpeg|png|gif)$/)) {
46+
str += '<img src="' + domain + res.key + '"/>';
47+
}
48+
$uploadedResult.html(str);
49+
},
50+
error: function(res) {
51+
console.log("失败:" + JSON.stringify(res));
52+
$uploadedResult.html('上传失败：' + res.responseText);
53+
}
54+
});
55+
return false;
56+
});
57+
});

‎demo/server.js‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,12 +75,25 @@ app.get('/multiple', function(req, res) {
7575
});
7676
});
7777

78+
app.get('/formdata', function(req, res) {
79+
var token = uptoken.token();
80+
res.render('formdata.html', {
81+
domain: config.Domain,
82+
uptoken: token
83+
});
84+
});
85+
7886
qiniu.conf.ACCESS_KEY = config.ACCESS_KEY;
7987
qiniu.conf.SECRET_KEY = config.SECRET_KEY;
8088

8189
var uptoken = new qiniu.rs.PutPolicy(config.Bucket_Name);
8290

8391

8492
app.listen(config.Port, function() {
85-
console.log('Listening on port %d', config.Port);
93+
console.log('Listening on port %d\n', config.Port);
94+
console.log('▽ ▽ ▽ ▽ ▽ ▽ ▽ ▽ ▽ ▽ ▽ ▽ ▽ Demos ▽ ▽ ▽ ▽ ▽ ▽ ▽ ▽ ▽ ▽ ▽ ▽ ▽ ▽ ▽ ▽')
95+
console.log(' ▹▹▹▹▹▹▹▹▹▹▹▹▹▹▹▹ Upload: http://127.0.0.1:%d ◁ ◁ ◁ ◁ ◁ ◁ ◁', config.Port);
96+
console.log(' ▹▹▹▹▹▹▹ Multiple upload: http://127.0.0.1:%d/multiple ◁ ◁ ◁', config.Port);
97+
console.log(' ▹▹▹▹▹▹▹ Formdata upload: http://127.0.0.1:%d/formdata ◁ ◁ ◁', config.Port);
98+
console.log('△ △ △ △ △ △ △ △ △ △ △ △ △ △ △ △ △ △ △ △ △ △ △ △ △ △ △ △ △ △ △ △ △\n');
8699
});

‎demo/styles/formdata.css‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
#testform{
2+
display: none;
3+
}
4+
body{
5+
padding: 0;
6+
margin:0;
7+
font-family: Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC",sans-self;
8+
color: #666;
9+
}
10+
.title{
11+
background-color: #0983C7;
12+
line-height: 40px;
13+
text-align: center;
14+
color:#fff;
15+
font-family: '微软雅黑';
16+
}
17+
.container{
18+
width: 100%;
19+
margin:0 auto;
20+
max-width:640px;
21+
background-color: #fff;
22+
border-radius: 10px;
23+
min-height: 600px;
24+
}
25+
label{
26+
display:block;
27+
width: 300px;
28+
height:150px;
29+
margin: 30px auto;
30+
border-radius: 10px;
31+
border:2px dashed #ddd;
32+
overflow: hidden;
33+
cursor: pointer;
34+
}
35+
label span{
36+
display:block;
37+
width:50px;
38+
height:50px;
39+
border-radius: 100%;
40+
border:3px solid #0983C7;
41+
margin:30px auto 15px;
42+
position:relative;
43+
}
44+
label em{
45+
font-style: normal;
46+
text-align: center;
47+
display:block;
48+
}
49+
label span:before, label span:after{
50+
display:block;
51+
content:'';
52+
background-color: #0983C7;
53+
position: absolute;
54+
}
55+
label span:before{
56+
width:3px;
57+
height:30px;
58+
top:10px;
59+
left:24px;
60+
}
61+
label span:after{
62+
width:30px;
63+
height:3px;
64+
top:24px;
65+
left:10px;
66+
}
67+
.selected-file, .progress, .uploaded-result{
68+
line-height: 30px;
69+
margin: 0 20px;
70+
}
71+
.uploaded-result span{
72+
display: block;
73+
}
74+
.uploaded-result img{
75+
display:block;
76+
margin: 20px auto;
77+
width:100%;
78+
max-width: 100%;
79+
}

‎demo/views/formdata.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
6+
<title>formdata 上传 demo</title>
7+
<link rel="stylesheet" href="../styles/formdata.css">
8+
<script src="../../bower_components/jquery/jquery.min.js"></script>
9+
<script src="../scripts/formdata.js"></script>
10+
<script>
11+
var domain = "<%= domain %>"; // you bucket domain eg: http://xxx.bkt.clouddn.com
12+
</script>
13+
</head>
14+
<body>
15+
<div class="container">
16+
<div class="title">Formdata 上传 demo</div>
17+
18+
<!-- Document：https://developer.qiniu.com/kodo/manual/form-upload -->
19+
<form id="testform" method="post" enctype="multipart/form-data">
20+
<input name="key" id="key" type="hidden" value="">
21+
<input name="token" type="hidden" value="<%= uptoken %>">
22+
<input id="userfile" name="file" type="file" />
23+
24+
<!-- take photo with phone -->
25+
<!-- <input id="userfile" name="file" accept="image/*" type="file" /> -->
26+
27+
<!-- take video with phone -->
28+
<!-- <input id="userfile" name="file" type="file" accept="video/*"/> -->
29+
30+
<input name="accept" type="hidden" />
31+
</form>
32+
33+
<!-- add file -->
34+
<label for="userfile">
35+
<span></span>
36+
<em>添加文件</em>
37+
</label>
38+
39+
<!-- upload info -->
40+
<div class="selected-file"></div>
41+
<div class="progress"></div>
42+
<div class="uploaded-result"></div>
43+
</div>
44+
</body>
45+
</html>

‎dist/qiniu.js‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
/*!
2-
* qiniu-js-sdk v1.0.17.1
2+
* qiniu-js-sdk v1.0.18
33
*
44
* Copyright 2015 by Qiniu
55
* Released under GPL V2 License.
66
*
77
* GitHub: http://github.com/qiniu/js-sdk
88
*
9-
* Date: 2016-10-13
9+
* Date: 2017-2-6
1010
*/
1111

1212
/*global plupload ,mOxie*/
@@ -1335,7 +1335,8 @@ function QiniuJsSDK() {
13351335
status: ajax.status,
13361336
response: ajax.responseText,
13371337
file: file,
1338-
code: -200
1338+
code: -200,
1339+
responseHeaders: ajax.getAllResponseHeaders()
13391340
};
13401341
logger.debug("mkfile is error: ", info);
13411342
uploader.trigger('Error', info);
@@ -1392,14 +1393,17 @@ function QiniuJsSDK() {
13921393
* @return {String} url of processed image
13931394
*/
13941395
this.imageView2 = function(op, key) {
1395-
var mode = op.mode || '',
1396+
1397+
if (!/^\d$/.test(op.mode)) {
1398+
return false;
1399+
}
1400+
1401+
var mode = op.mode,
13961402
w = op.w || '',
13971403
h = op.h || '',
13981404
q = op.q || '',
13991405
format = op.format || '';
1400-
if (!mode) {
1401-
return false;
1402-
}
1406+
14031407
if (!w && !h) {
14041408
return false;
14051409
}

‎dist/qiniu.min.js‎

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

‎dist/qiniu.min.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)