webupload 使用
2022-10-28 15:40:52 来源：admin 点击：351
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--引入WebUploader文件上传的CSS-->
<link rel="stylesheet" type="text/css" href="./webuploader/webuploader.css" media="screen" />
<script type="text/javascript" src="./webuploader/jquery-1.8.3.js"></script>
<!--引入WebUploader文件上传的JS-->
<script type="text/javascript" src="./webuploader/webuploader.js"></script>
<style>
.maskUpload{
width: 300px;
height: 300px;
background-color: blueviolet;
}
</style>
</head>
<body>
<!--用来存放文件信息-->
<div>
<div>
<div id="filePicker">选择文件</div>
<button id="ctlBtn" onclick="upload_imgs()">开始上传</button>
<div></div>
</div>
</div>
<script type="text/javascript">
var uploader;
$(function(){
//初始化Web Uploader,每上传一个文件都会创建一个uploader对象，同时选择多个文件时，则会创建多个uploader对象。
uploader = WebUploader.create({
// 选完文件后，是否自动上传。
auto: false, //true时，选择文件后自动上传。
// swf文件路径
swf: 'resources/widget/webuploader/Uploader.swf',
// 文件接收服务端。
server: 'upload/uploadImg',
// 选择文件的按钮。可选。
pick: '#filePicker',
dnd: ".maskUpload",
accept: {
title: '文件上传',
//支持上传的文件类型
extensions: 'jpg,png,doc,xlsx',
mimeTypes: '*'
}
});
//当文件被加入队列时触发
uploader.on('fileQueued',function (file) {
console.log(file);
});
//队列中所有文件上传结束时触发
uploader.on('error', (type) => {
console.log('上传文件类型不支持时触发');
});
//文件上传中实时返回进度
uploader.on('uploadProgress', (file, percentage) => {
console.log('上传进度'+percentage);
});
//文件上传成功时触发
uploader.on("uploadSuccess",function (file,response) {
console.log('上传成功');
});
//文件上传错误时触发
uploader.on('uploadError', (file, reason) => {
console.log('上传失败');
});
//队列中所有文件上传结束时触发
uploader.on('uploadFinished', (file, reason) => {
console.log('上传结束');
});
})
//上传图片
function upload_imgs() {
if (uploader){
uploader.upload();
}
}
</script>
</body>
</html>