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....
});
文章写到这儿也就结束啦,祝你工作愉快!