webuploader is a highly compatible and very easy-to-use front-end control that can also be used in vue projects.
Let's take a brief look
first. You can download the resource plugin I uploaded first
https://download.csdn.net/download/weixin_45966674 /85899651?spm=1001.2014.3001.5503 After
downloading, we can see the directory as follows.
Yes, this plugin relies on jquery. This is a small failure, but the technology of the previous generation basically depends on jq.
Then we build a directory, build a webuploader, put these four files in it,
and then create a page in the same directory as webuploader. The
demo code is as follows
<!DOCTYPE html>
<html lang="en">
<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 class="uploader-demo">
<div class="btns">
<div id="filePicker">选择文件</div>
<button id="ctlBtn" class="mybutton" onclick="upload_imgs()">开始上传</button>
<div class = "maskUpload"></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>
Then we click to upload the extensions here to control the file suffix format. The format I set only supports jpg, png, doc, xlsx
If you click upload, if it is right, it will be added to the queue and trigger fileQueued. Each file added to the queue will trigger fileQueued. We can define an array to store each file stream of fileQueued for display,
and then we upload unsupported formats will be uploadFinished intercept it
When we click upload, uploadProgress will be triggered. This is the biggest highlight of this framework. I think you can monitor the progress of the upload.
Execute uploader.upload(); upload directly. If the
upload is successful and trigger uploadSuccess
, execute uploadFinished
Of course, there is also a bright spot that the drag and drop upload
dnd attribute control corresponds to the css selector to choose which element to drag and drop to trigger the upload.
Here we set the class of the div with maskUpload, and
we drag the file directly from the computer to the interface. It is also very useful to trigger adding to the queue
But this tool needs the background to cooperate with the server to control the uploading service port swf to set the uploading interface name