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

1、首先去官网下载js以及css库：
网址在这儿：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上传插件的用法

猜你喜欢