当前位置:网站首页>Webuploader file upload drag upload progress monitoring type control upload result monitoring control
Webuploader file upload drag upload progress monitoring type control upload result monitoring control
2022-07-05 19:26:00 【-Geng Rui-】
webuploader Is a very compatible And also very easy to use front-end controls vue It can also be used in projects
Let's take a brief look at
You can download the resource plug-in I uploaded first
https://download.csdn.net/download/weixin_45966674/85899651?spm=1001.2014.3001.5503
After downloading, we can see the following directory
you 're right This plug-in depends on jquery This is a small failure But the technology of the previous generation It is also true that they basically depend on jq
Then we build a directory To build a webuploader Put these four files inside
And then webuploader Peer directory creation page
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>
<!-- introduce WebUploader File upload 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>
<!-- introduce WebUploader File upload JS-->
<script type="text/javascript" src="./webuploader/webuploader.js"></script>
<style> .maskUpload{
width: 300px; height: 300px; background-color: blueviolet; } </style>
</head>
<body>
<!-- Used to store file information -->
<div class="uploader-demo">
<div class="btns">
<div id="filePicker"> Select File </div>
<button id="ctlBtn" class="mybutton" onclick="upload_imgs()"> Start uploading </button>
<div class = "maskUpload"></div>
</div>
</div>
<script type="text/javascript"> var uploader; $(function(){
// initialization Web Uploader, Each file uploaded will create a uploader object , When multiple files are selected at the same time , Multiple... Will be created uploader object . uploader = WebUploader.create({
// After selecting the file , Whether to upload automatically . auto: false, //true when , Select the file and upload it automatically . // swf File path swf: 'resources/widget/webuploader/Uploader.swf', // File receiving server . server: 'upload/uploadImg', // Select the file button . Optional . pick: '#filePicker', dnd: ".maskUpload", accept: {
title: ' Upload files ', // Supports the types of files uploaded extensions: 'jpg,png,doc,xlsx', mimeTypes: '*' } }); // Triggered when the file is added to the queue uploader.on('fileQueued',function (file) {
console.log(file); }); // Triggered when all files in the queue are uploaded uploader.on('error', (type) => {
console.log(' Triggered when the upload file type is not supported '); }); // The progress is returned in real time during file uploading uploader.on('uploadProgress', (file, percentage) => {
console.log(' Upload progress '+percentage); }); // Triggered when the file is uploaded successfully uploader.on("uploadSuccess",function (file,response) {
console.log(' Upload successful '); }); // Triggered when file upload error uploader.on('uploadError', (file, reason) => {
console.log(' Upload failed '); }); // Triggered when all files in the queue are uploaded uploader.on('uploadFinished', (file, reason) => {
console.log(' End of upload '); }); }) // To upload pictures function upload_imgs() {
if (uploader){
uploader.upload(); } } </script>
</body>
</html>
Then we click upload here extensions Control file suffix format The format I set Only support jpg,png,doc,xlsx
Click upload if it is right Will be added to the queue Trigger fileQueued Each file added to the queue will trigger fileQueued We can define an array take fileQueued Every file stream of is saved for display
Then we upload unsupported formats Will be uploadFinished Stop it
When we click upload, it will trigger uploadProgress This is the biggest highlight of this framework You can monitor the progress of uploading How far is it
perform uploader.upload(); upload
Upload success triggers uploadSuccess
If it fails, execute uploadFinished
Of course, another highlight is drag upload
dnd Attribute control It corresponds to css Selectors Choose which element to drag to trigger upload
We have set up class by maskUpload Of div
When we drag a file directly from the computer to the interface, it will trigger it to be added to the queue It is also very easy to use
But this tool needs background cooperation server Control the service port for uploading swf Set the name of the uploaded interface
边栏推荐
- UWB ultra wideband positioning technology, real-time centimeter level high-precision positioning application, ultra wideband transmission technology
- 建议收藏,我的腾讯Android面试经历分享
- 完爆面试官,一线互联网企业高级Android工程师面试题大全
- 手把手教你处理 JS 逆向之图片伪装
- 2022 the latest big company Android interview real problem analysis, Android development will be able to technology
- How to choose the notion productivity tools? Comparison and evaluation of notion, flowus and WOLAI
- shell编程基础(第9篇:循环)
- 软件测试工程师是做什么的?待遇前景怎么样?
- Technology sharing | common interface protocol analysis
- [Collection - industry solutions] how to build a high-performance data acceleration and data editing platform
猜你喜欢
[AI framework basic technology] automatic derivation mechanism (autograd)
word如何转换成pdf?word转pdf简单的方法分享!
Password reset of MariaDB root user and ordinary user
Fuzor 2020軟件安裝包下載及安裝教程
Explain in detail the functions and underlying implementation logic of the groups sets statement in SQL
Ten years at sea: old and new relay, dark horse rising
Oracle故障处理:Ora-10873:file * needs to be either taken out of backup or media recovered
集合
如何实现游戏中的在线计时器和离线计时器
【FAQ】华为帐号服务报错 907135701的常见原因总结和解决方法
随机推荐
Talking about fake demand from takeout order
出海十年:新旧接力,黑马崛起
PHP利用ueditor实现上传图片添加水印
Debezium系列之:修改源码支持unix_timestamp() as DEFAULT value
Necessary skills for interview in large factories, 2022android will not die, I will not fall
Go语言学习教程(十六)
太牛了,看这篇足矣了
cf:B. Almost Ternary Matrix【對稱 + 找規律 + 構造 + 我是構造垃圾】
毫米波雷达人体感应器,智能感知静止存在,人体存在检测应用
【obs】QString的UTF-8中文转换到blog打印 UTF-8 char*
Android面试,android音视频开发
Debezium系列之:postgresql从偏移量加载正确的最后一次提交 LSN
力扣 1200. 最小绝对差
详解SQL中Groupings Sets 语句的功能和底层实现逻辑
Bitcoinwin (BCW)受邀参加Hanoi Traders Fair 2022
通过POI追加数据到excel中小案例
Go语言 | 01 WSL+VSCode环境搭建避坑指南
Inventory of the most complete low code / no code platforms in the whole network: Jiandao cloud, partner cloud, Mingdao cloud, Qingliu, xurong cloud, Jijian cloud, treelab, nailing · Yida, Tencent clo
MMO项目学习一:预热
IBM大面积辞退40岁+的员工,掌握这十个搜索技巧让你的工作效率至上提高十倍