Web Uploader是百度提供的。
1:下载:http://fex.baidu.com/webuploader/(官方下载/示例)
2:使用Web Uploader文件上传需要引入三种资源:JS, CSS, SWF。
///src值根据文件在项目中的位置而定
3、html部分:
<div id="uploadWindow" class="container-fluid">
<div class="windowTop" style="border-bottom:1px solid #808080;">
<div id="filePicker" style="width:50%;float:left;padding:5px 3px;">
选择文件
</div>
<button id="ctlBtn" class="button-upload">开始上传</button>
<button id="closeUploadWindow" class="button-upload cl">关闭</button>
</div>
<div class="windowCenter">文件上传示例:</div>
<div class="windowBottom">
<div id="selectedFiles" class="wu-example">
<!--用来存放文件信息-->
<div id="fileList" class="uploader-list"></div>
</div>
</div>
</div>
4、js部分
var applicationPath = window.applicationPath === "" ? "" : window.applicationPath || "../../";
// 上传初始化
function initUpload() {
//文件上传
var $ = jQuery,
$list = $('#fileList'),
$btn = $('#ctlBtn'),
state = 'pending',
uploader;
uploader = WebUploader.create({
auto: false,// 选完文件后,是否自动上传。
// 不压缩image
resize: false,
// swf文件路径
swf: applicationPath + '~/Content/webuploader/Uploader.swf',
// 文件接收服务端。
server: '/Home/UploadFiles',
// 选择文件的按钮。可选。
// 内部根据当前运行是创建,可能是input元素,也可能是flash.
pick: '#filePicker',
//accept: {
// title: "RFA",
// extensions: "rfa",
// mimeTypes: ".rfa,application/octet-stream",
//},
chunked: true,// 开起分片上传。
threads: 1, // 上传并发数。允许同时最大上传进程数。
method: 'POST', // 文件上传方式,POST或者GET。
//fileSizeLimit: 1024 \* 1024 \* 100 \* 100, //验证文件总大小是否超出限制, 超出则不允许加入队列。
//fileSingleSizeLimit: 1024 \* 1024 \* 100, //验证单个文件大小是否超出限制, 超出则不允许加入队列。
//fileVal: 'upload', // \[默认值:'file'\] 设置文件上传域的name。
});
// 当有文件添加进来的时候
uploader.on('fileQueued', function (file) {
$list.append('<div id="' + file.id + '" class="item">' +
'<h4 class="info">' + file.name + '</h4>' +
'<p class="state">等待上传...</p>' +
'</div>');
});
// 文件上传过程中创建进度条实时显示。
uploader.on('uploadProgress', function (file, percentage) {
var $li = $('#' + file.id),
$percent = $li.find('.progress .progress-bar');
// 避免重复创建
if (!$percent.length) {
$percent = $('<div class="progress progress-striped active">' +
'<div class="progress-bar" role="progressbar" style="width: 0%">' +
'</div>' +
'</div>').appendTo($li).find('.progress-bar');
}
$li.find('p.state').text('上传中');
$percent.css('width', percentage \* 100 + '%');
});
uploader.on('uploadSuccess', function (file, response) {
$('#' + file.id).find('p.state').text(response.info);
// fileurl = response.data; //上传文件的路径
//
});
uploader.on('uploadError', function (file, response) {
debugger
$('#' + file.id).find('p.state').text('上传出错 ' + response);
});
uploader.on('uploadComplete', function (file, response) {
$('#' + file.id).find('.progress').fadeOut();
});
//当所有文件上传完成时触发
uploader.on('uploadFinished', function () {
** 这里是一个异步回调函数,对文件的一个处理。后台通过单独开一个线程进行处理。详情看多线程分类里相关文档里**
// webuploaderCallBack();
});
uploader.on('all', function (type) {
if (type === 'startUpload') {
state = 'uploading';
} else if (type === 'stopUpload') {
state = 'paused';
} else if (type === 'uploadFinished') {
state = 'done';
}
if (state === 'uploading') {
$btn.text('上传中...');
} else {
$btn.text('开始上传');
}
});
$btn.on('click', function () {
var type="010";
var onelevel = $("#onelevel option:selected").attr("id");
var twolevel = $("#twolevel option:selected").attr("id");
var threelevel = $("#threelevel option:selected").attr("id");
if (threelevel != undefined) {
type = threelevel;
}
else {
if (twolevel != undefined) {
type = twolevel;
} else {
if (onelevel != undefined) {
type = onelevel;
}
}
}
// 初始化以后添加
uploader.options.formData.filetype = type;
if (state === 'uploading') {
uploader.stop();
} else {
uploader.upload();
}
});
///取消上传
$('.uploader-list').on('click', '.btn-remove', function () {
debugger
// 从文件队列中删除某个文件id
file\_id = $(this).data('id');
uploader.removeFile(file\_id, true); // 从队列中删除
//console.log(uploader.getFiles()) // 队列显示还在 其实已经删除
});
//重试上传,重试指定文件,或者从出错的文件开始重新上传。
$('.uploader-list').on('click', '.upload-item\_\_progress span', function () {
debugger
uploader.retry($(this).data('file'));
});
};
5、常见问题及解决方案:
待写
手机扫一扫
移动阅读更方便
你可能感兴趣的文章