七牛上傳的極簡單例子
阿新 • • 發佈：2018-12-23
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="demo" aria-labelledby="demo-tab">
<div class="row" style="margin-top: 20px;">
<!-- <input type="hidden" id="domain" value="http://7xocov.com2.z0.glb.qiniucdn.com/">
<input type="hidden" id="uptoken_url" value="uptoken"> -->
<ul class="tip col-md-12 text-mute">
<li>
<small>
JavaScript SDK 基於 Plupload 開發，可以通過 Html5 或 Flash 等模式上傳檔案至七牛雲端儲存。
</small>
</li>
<li>
<small>臨時上傳的空間不定時清空，請勿儲存重要檔案。</small>
</li>
<li>
<small>Html5模式大於4M檔案採用分塊上傳。</small>
</li>
<li>
<small>上傳圖片可檢視處理效果。</small>
</li>
<li>
<small>本示例限制最大上傳檔案100M。</small>
</li>
</ul>
<div class="col-md-12">
<div id="container">
<!--<a class="btn btn-default btn-lg " id="pickfiles" href="http://upload.qiniu.com/" >
<i class="glyphicon glyphicon-plus"></i>
<span>選擇檔案</span>
</a>-->
<input name="1.png" type="file" id="pickfiles" />
</div>
</div>
<div style="display:none" id="success" class="col-md-12">
<div>
佇列全部檔案處理完畢
</div>
</div>
<div class="col-md-12 ">
<table style="margin-top:40px;display:none">
<thead>
<tr>
<th class="col-md-4">Filename</th>
<th class="col-md-2">Size</th>
<th class="col-md-6">Detail</th>
</tr>
</thead>
<tbody id="fsUploadProgress">
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.staticfile.org/plupload/2.1.2/plupload.full.min.js"></script>
<script type="text/javascript" src="https://cdn.staticfile.org/plupload/2.1.2/moxie.js"></script>
<script type="text/javascript" src="https://cdn.staticfile.org/plupload/2.1.2/i18n/zh_CN.js"></script>
<script type="text/javascript" src="demo/scripts/ui.js"></script>
<!-- qiniu.js依賴於Plupload，所以Plupload要在qiniu.js之前引用 -->
<!--<script type="text/javascript" src="https://cdn.staticfile.org/qiniu-js-sdk/1.0.14-beta/qiniu.js"></script>-->
<!--<script type="text/javascript" src="https://cdn.staticfile.org/qiniu-js-sdk/1.0.14-beta/qiniu.min.js"></script>-->
<script type="text/javascript" src="https://cdn.staticfile.org/highlight.js/9.8.0/highlight.min.js"></script>
<script src="dist/qiniu.js" type="text/javascript"></script>
<!--<script src="dist/qiniu.min.js" type="text/javascript"></script>-->
<script type="text/javascript">
//引入Plupload 、qiniu.js後
$(function() {
var token=gettoken();
console.log(2)
console.log(token)
var uploader = Qiniu.uploader({
runtimes: 'html5,flash,html4',
browse_button: 'pickfiles',
// HTML中重要的div的ID
container: 'container',
drop_element: 'container',
max_file_size: '1000mb',
dragdrop: true,
chunk_size: '4mb',
// qiniu-js-sdk初始化時請求token的url的值
// uptoken_url: 'http://localhost:8080/ezz2/weixin/getToken',
uptoken :token,
// 上傳的域名地址
domain: 'http://oq544o684.bkt.clouddn.com/',
get_new_uptoken: false,
auto_start: true,
log_level: 5,
init: {
'FilesAdded': function(up, files) {
$('table').show();
$('#success').hide();
plupload.each(files, function(file) {
var progress = new FileProgress(file, 'fsUploadProgress');
progress.setStatus("等待...");
progress.bindUploadCancel(up);
});
},
'BeforeUpload': function(up, file) {
var progress = new FileProgress(file, 'fsUploadProgress');
var chunk_size = plupload.parseSize(this.getOption('chunk_size'));
if (up.runtime === 'html5' && chunk_size) {
progress.setChunkProgess(chunk_size);
}
},
'UploadProgress': function(up, file) {
var progress = new FileProgress(file, 'fsUploadProgress');
var chunk_size = plupload.parseSize(this.getOption('chunk_size'));
progress.setProgress(file.percent + "%", file.speed, chunk_size);
},
'UploadComplete': function() {
$('#success').show();
},
'FileUploaded': function(up, file, info) {
var domain = up.getOption('domain');
var res = JSON.parse(info);
var sourceLink = domain + res.key; //獲取上傳成功後的檔案的Url
alert(sourceLink)
var progress = new FileProgress(file, 'fsUploadProgress');
progress.setComplete(up, info);
},
'Error': function(up, err, errTip) {
$('table').show();
var progress = new FileProgress(err.file, 'fsUploadProgress');
progress.setError();
progress.setStatus(errTip);
}
}
});
uploader.bind('FileUploaded', function() {
// console.log('hello man,a file is uploaded');
});
// 拖拽時美化樣式
$('#container').on(
'dragenter',
function(e) {
e.preventDefault();
$('#container').addClass('draging');
e.stopPropagation();
}
).on('drop', function(e) {
e.preventDefault();
$('#container').removeClass('draging');
e.stopPropagation();
}).on('dragleave', function(e) {
e.preventDefault();
$('#container').removeClass('draging');
e.stopPropagation();
}).on('dragover', function(e) {
e.preventDefault();
$('#container').addClass('draging');
e.stopPropagation();
});
});
function gettoken(){
var t=""
$.ajax({
type:"post",
data:'',
datatype:'json',
url:"http://1542e87s78.51mypc.cn:14613/ezz2/weixin/getToken",
async:false,
success:function(data){
t=data.data.upToken;
}
});
return t;
}
</script>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="demo" aria-labelledby="demo-tab">
<div class="row" style="margin-top: 20px;">
<!-- <input type="hidden" id="domain" value="http://7xocov.com2.z0.glb.qiniucdn.com/">
<input type="hidden" id="uptoken_url" value="uptoken"> -->
<ul class="tip col-md-12 text-mute">
<li>
<small>
JavaScript SDK 基於 Plupload 開發，可以通過 Html5 或 Flash 等模式上傳檔案至七牛雲端儲存。
</small>
</li>
<li>
<small>臨時上傳的空間不定時清空，請勿儲存重要檔案。</small>
</li>
<li>
<small>Html5模式大於4M檔案採用分塊上傳。</small>
</li>
<li>
<small>上傳圖片可檢視處理效果。</small>
</li>
<li>
<small>本示例限制最大上傳檔案100M。</small>
</li>
</ul>
<div class="col-md-12">
<div id="container">
<!--<a class="btn btn-default btn-lg " id="pickfiles" href="http://upload.qiniu.com/" >
<i class="glyphicon glyphicon-plus"></i>
<span>選擇檔案</span>
</a>-->
<input name="1.png" type="file" id="pickfiles" />
</div>
</div>
<div style="display:none" id="success" class="col-md-12">
<div>
佇列全部檔案處理完畢
</div>
</div>
<div class="col-md-12 ">
<table style="margin-top:40px;display:none">
<thead>
<tr>
<th class="col-md-4">Filename</th>
<th class="col-md-2">Size</th>
<th class="col-md-6">Detail</th>
</tr>
</thead>
<tbody id="fsUploadProgress">
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.staticfile.org/plupload/2.1.2/plupload.full.min.js"></script>
<script type="text/javascript" src="https://cdn.staticfile.org/plupload/2.1.2/moxie.js"></script>
<script type="text/javascript" src="https://cdn.staticfile.org/plupload/2.1.2/i18n/zh_CN.js"></script>
<script type="text/javascript" src="demo/scripts/ui.js"></script>
<!-- qiniu.js依賴於Plupload，所以Plupload要在qiniu.js之前引用 -->
<!--<script type="text/javascript" src="https://cdn.staticfile.org/qiniu-js-sdk/1.0.14-beta/qiniu.js"></script>-->
<!--<script type="text/javascript" src="https://cdn.staticfile.org/qiniu-js-sdk/1.0.14-beta/qiniu.min.js"></script>-->
<script type="text/javascript" src="https://cdn.staticfile.org/highlight.js/9.8.0/highlight.min.js"></script>
<script src="dist/qiniu.js" type="text/javascript"></script>
<!--<script src="dist/qiniu.min.js" type="text/javascript"></script>-->
<script type="text/javascript">
//引入Plupload 、qiniu.js後
$(function() {
var token=gettoken();
console.log(2)
console.log(token)
var uploader = Qiniu.uploader({
runtimes: 'html5,flash,html4',
browse_button: 'pickfiles',
// HTML中重要的div的ID
container: 'container',
drop_element: 'container',
max_file_size: '1000mb',
dragdrop: true,
chunk_size: '4mb',
// qiniu-js-sdk初始化時請求token的url的值
// uptoken_url: 'http://localhost:8080/ezz2/weixin/getToken',
uptoken :token,
// 上傳的域名地址
domain: 'http://oq544o684.bkt.clouddn.com/',
get_new_uptoken: false,
auto_start: true,
log_level: 5,
init: {
'FilesAdded': function(up, files) {
$('table').show();
$('#success').hide();
plupload.each(files, function(file) {
var progress = new FileProgress(file, 'fsUploadProgress');
progress.setStatus("等待...");
progress.bindUploadCancel(up);
});
},
'BeforeUpload': function(up, file) {
var progress = new FileProgress(file, 'fsUploadProgress');
var chunk_size = plupload.parseSize(this.getOption('chunk_size'));
if (up.runtime === 'html5' && chunk_size) {
progress.setChunkProgess(chunk_size);
}
},
'UploadProgress': function(up, file) {
var progress = new FileProgress(file, 'fsUploadProgress');
var chunk_size = plupload.parseSize(this.getOption('chunk_size'));
progress.setProgress(file.percent + "%", file.speed, chunk_size);
},
'UploadComplete': function() {
$('#success').show();
},
'FileUploaded': function(up, file, info) {
var domain = up.getOption('domain');
var res = JSON.parse(info);
var sourceLink = domain + res.key; //獲取上傳成功後的檔案的Url
alert(sourceLink)
var progress = new FileProgress(file, 'fsUploadProgress');
progress.setComplete(up, info);
},
'Error': function(up, err, errTip) {
$('table').show();
var progress = new FileProgress(err.file, 'fsUploadProgress');
progress.setError();
progress.setStatus(errTip);
}
}
});
uploader.bind('FileUploaded', function() {
// console.log('hello man,a file is uploaded');
});
// 拖拽時美化樣式
$('#container').on(
'dragenter',
function(e) {
e.preventDefault();
$('#container').addClass('draging');
e.stopPropagation();
}
).on('drop', function(e) {
e.preventDefault();
$('#container').removeClass('draging');
e.stopPropagation();
}).on('dragleave', function(e) {
e.preventDefault();
$('#container').removeClass('draging');
e.stopPropagation();
}).on('dragover', function(e) {
e.preventDefault();
$('#container').addClass('draging');
e.stopPropagation();
});
});
function gettoken(){
var t=""
$.ajax({
type:"post",
data:'',
datatype:'json',
url:"http://1542e87s78.51mypc.cn:14613/ezz2/weixin/getToken",
async:false,
success:function(data){
t=data.data.upToken;
}
});
return t;
}
</script>