关于前端WebUploader上传插件的用法

落日映苍穹つ 2022-03-11 05:46 604阅读 0赞

**1、首先去官网下载js以及css库：**  
      网址在这儿：[**WebUploader官网地址**][WebUploader]  
**2、然后在页面引入对应的文件：**  
      第一步,先引入：

<link href="~/Content/js/webuploader-0.1.5/webuploader.css" rel="stylesheet" />

其次再引入：

<script type="text/javascript" src="~/Content/js/webuploader-0.1.5/jquery.min.js"></script>
    <script type="text/javascript" src="~/Content/js/webuploader-0.1.5/webuploader.min.js"></script>

**3、在页面加入相应的HTML代码：**

@*此处省略本人写好的样式代码*@
    <div id="uploader">
       <div class="btns">
           <div id="picker">点击选择文件</div>
       </div>
    </div>

**4、对应的js代码部分**

var uploader = WebUploader.create({
         auto: true, // 选择文件后自动上传
         runtimeOrder: 'html5', // 直接使用html5模式，还有flash的我就忽略了..
         pick: {
              id: '#picker', // 按钮元素
              multiple: false // 是否支持文件多选，false表示只能选一个
         },
         // swf文件路径
         swf: '~/Content/js/webuploader-0.1.5/Uploader.swf',
         server: '/upload/normal', // 上传文件的url
         accept: {
              title: 'Excel',//此处，我以上传excel文件为例
              extensions: 'xls,xlsx', // 允许的文件后缀，不带点，多个用逗号分割，这里支持老版的Excel和新版的
              mimeTypes: 'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
         }//,
        // accept: {   // 只允许选择图片文件。
        //       title: 'Images',
        //      extensions: 'jpg,jpeg,png',
        //      mimeTypes: 'image/*'
        // }
         disableGlobalDnd: true, // 禁掉全局的拖拽功能。
         fileNumLimit: 1, // 验证文件总数量, 超出则不允许加入队列
         fileSizeLimit: 30 * 1024 * 1024, // 限制所有上传文件的大小
         fileSingleSizeLimit: 30 * 1024 * 1024 // 限制单个上传文件的大小
    });
    
    // 当有文件被添加进队列的时候
    uploader.on('fileQueued', function (file) {
     //自己去定义代码：TODO....
         $list.append('<div id="' + file.id + '" class="item">' +
                             '<h4 class="info">' + file.name + '</h4>' +
                             '<p class="state">等待上传...</p>' +
                             '</div>');
    });
    
    // 文件上传成功
    uploader.on('uploadSuccess', function(file, response) {
         // TODO..
    });
    
    // 上传失败
    uploader.on('uploadError', function(file) {
       // TODO....
    });
     
    // 上传完成（不论成功或失败都会执行）
    uploader.on( 'uploadComplete', function( file ) {
        //清空队列
        uploader.reset();
    });
     
    // 上传错误
    uploader.on('error', function(status) {
       // TODO....
    });

文章写到这儿也就结束啦，祝你工作愉快！  
人生有两出悲剧：一是万念俱灰，另一是踌躇满志。

[WebUploader]: http://fex.baidu.com/webuploader/

发表评论取消回复

表情：

评论列表（有 0 条评论，604人围观）

还没有评论，来说两句吧...

相关阅读

相关百度上传控件WebUploader介绍

功能介绍 WebUploader是由Baidu开发的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE

た入场券/ 2022年07月03日 20:55/ 0 赞/ 255 阅读

相关百度上传插件webuploader使用心得

今天写一下最近用webuploader插件遇到的困难，关于它的使用百度上有很多例子，大家自行百度，推荐看官方API。这款上传插件的优点在于支持html5和flash两种上

﹏ヽ暗。殇╰゛Y/ 2022年06月16日 05:54/ 0 赞/ 384 阅读

相关关于前端WebUploader上传插件的用法

1、首先去官网下载js以及css库：网址在这儿：[WebUploader官网地址][WebUploader] 2、然后在页面引入对应的文件：

落日映苍穹つ/ 2022年03月11日 05:46/ 0 赞/ 605 阅读

相关关于Plupload上传插件的使用方法

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8">

叁歲伎倆/ 2021年12月03日 06:57/ 0 赞/ 687 阅读

相关百度上传webuploader

一.注意细节 1.不能重复上传问题？根据查看webuploader文档里面有个duplicate属性，是可选的， true为可重复，false为不可重复默认为und

不念不忘少年蓝@/ 2021年09月12日 07:06/ 0 赞/ 562 阅读

相关 webuploader 设置上传数量

function onpost_Echo_ndkh2(serverURL,fileType,pickerID,listName,doneback,type){//上传路

水深无声/ 2021年07月26日 02:01/ 0 赞/ 637 阅读

相关 WebUploader - 分片上传

在开发过程中遇到需要上传大文件的需求，但是大文件整个上传会导致服务器内存爆炸。分片上传的思路利用[`blob.slice()`][blob.slice]方法，根据指

朱雀/ 2021年07月05日 01:12/ 0 赞/ 632 阅读

相关百度上传控件webuploader的上传与修改，Java版本

一、`webuploader`的官网例子：[点击打开链接][Link 1] 二、上传与编辑实现 1、引入`CSS`和`js`文件 <script ty

太过爱你忘了你带给我的痛/ 2021年06月26日 16:06/ 0 赞/ 709 阅读

相关 webuploader上传插件源代码重点难点分析

`webuploader`源代码设计博大精深，具有工匠精神，本文分析`webuploader`源代码总体流程和一些重点难点，`webuploader`采用模块机制，比较复杂，模

系统管理员/ 2021年06月26日 16:06/ 0 赞/ 449 阅读

相关基于WebUploader的图片上传

UploadController.cs using System; using System.Collections.Generic; using

秒速五厘米/ 2021年06月26日 16:06/ 0 赞/ 602 阅读