<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Uploader</title>
<style>
#upload {
padding: 20px;
}
.cus-class1 {
display: inline-block;
}
</style>
</head>
<body>
<div class="wrap">
<button id="upload">upload</button>
</div>
<button id="click">销毁实例</button>
<!--如果需要使用loading功能,需要引入该样式文件,反之不需要引入-->
<link rel="stylesheet" href="uploader.css">
<script src="https://cdn.bootcss.com/zepto/1.1.7/zepto.min.js"></script>
<!--依赖jquery或者zepto-->
<script src="uploader.js"></script>
<script>
// 创建实例
var uploader = new Uploader({
id: 'upload',
action: 'https://www.easy-mock.com/mock/5b2c976f96a0217456c95ecc/example/upload',
multiple: false,
loading: true,
classNames: ['cus-class1', 'cus-class2'],
headers: {},
data: {},
accept: 'image/*',
onStart: function () {
// 开始上传的回调
console.log('start')
},
onProgress: function () {
// 进度的回调
console.log('onProgress')
},
onSuccess: function (res) {
// 上传成功的回调
console.log('onSuccess:', res)
},
onError: function (err) {
// 上传失败的回调
console.log(err, 'onError')
}
})
// 销毁实例
$("#click").click(function () {
uploader.destroy()
})
</script>
</body>
</html>