当前位置：网站首页>webuploader文件上传拖拽上传进度监听类型控制上传结果监听控件

webuploader文件上传拖拽上传进度监听类型控制上传结果监听控件

2022-07-05 19:23:00 【-耿瑞-】

webuploader 是一款兼容性很强且也非常好用的前端控件 vue项目中也可以使用
我们先来简单看看
大家可以先下载我上传的资源插件
https://download.csdn.net/download/weixin_45966674/85899651?spm=1001.2014.3001.5503
下载下来后我们可以看到目录如下
在这里插入图片描述
没错这款插件是依赖jquery 这是个小败笔吧不过上一代的技术也确实基本都要依赖jq

然后我们建一个目录建一个webuploader 将这四个文件放进里面
然后和webuploader同级目录创建页面
演示代码如下

 <!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>