当前位置：网站首页>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
Insert picture description here
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
Insert picture description here
Insert picture description here
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
Insert picture description here
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

原网站

版权声明
本文为[-Geng Rui-]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/186/202207051923156554.html

边栏推荐

猜你喜欢

随机推荐