您的位置:首页 > 其它

WebUploader上传文件

2016-07-15 09:40 267 查看
引入资源文件2个,css文件和js文件。
function initUploader() {
uploader = WebUploader.create({
swf : '/resources/plugin/webuploader-0.1.5/Uploader.swf',// swf文件路径
server : '${urlApkUpload}',// 文件接收服务端
pick : '#btnPicker',// 选择文件的按钮,内部根据当前运行是创建,可能是input元素,也可能是flash.
dnd: '.page-body',// 指定Drag And Drop拖拽的容器
compress : false,// 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
auto : true,// 设置为 true 后,不需要手动调用上传,有文件选择即开始上传
prepareNextFile: true,
fileSingleSizeLimit: 100 * 1024 * 1024,// 100M 验证单个文件大小是否超出限制, 超出则不允许加入队列
timeout: 25 * 60 * 1000,// 25分钟
accept : {
title : '选择 APK 文件',
extensions : 'apk',
mimeTypes : 'application/vnd.android.package-archive'
}
});

// 当有文件被添加进队列的时候
uploader.on('fileQueued', function(file) {
if (!file.name.endWith(".apk")) return false;
if (!uploadModal) {
uploadModal = layer.open({
type: 1,
title: '文件上传',
area : ['800px' , '320px'],
shade: false,
maxmin: false,
moveType: 1,
offset: 'rb',
shift: 2,
end: function() {
uploadModal = null;
uploader.reset();
}
});
}
$(".layui-layer-content").append('<div id="' + file.id + '" class="item_file">' +
'<div class="file-mask"></div>' +
'<i class="fa fa-android file_icon"></i>' +
'<span class="file_content file_name ellipsis" title="' + file.name + '">' + file.name + '</span>' +
'<span class="file_content file_size">' + WebUploader.formatSize(file.size) + '</span>' +
'<span class="file_content file_state ellipsis" title="">等待上传...</span>' +
'<a href="javascript:void(0);" class="btn btn-primary file_btn btnRemoveFile">删除</a>' +
'</div>');

$(".btnRemoveFile").bind("click", function() {
var fileItem = $(this).parent();
uploader.removeFile($(fileItem).attr("id"), true);
$(fileItem).fadeOut(function() {
$(fileItem).remove();
});
});
});

// 文件上传过程中创建进度条实时显示。
uploader.on('uploadProgress', function(file, percentage) {
var $li = $('#' + file.id);
var txtState = (percentage * 100).toFixed(0) + '%';
/*if (percentage >= 0.99) {
txtState = "正在处理文件...";
$li.find('.file_btn').hide();
}*/
$li.find('.file_state').text(txtState);
$li.find('.file_state').attr("title", txtState);
$li.find('.file-mask').css('width', percentage * 100 + '%');
$(".layui-layer-close").hide();
});

// 当文件上传成功时触发
uploader.on('uploadSuccess', function(file, data) {
var $li = $('#' + file.id);
if (data.result) {
uploadSuccess($li, "正在处理文件...");
$li.find('.file_btn').hide();
$.ajax({
type : "POST",
url : "${urlApkHandle}?fileName=" + $li.children(".file_name").html() + "&filePath=" + data.obj,
success : function(data) {
refreshTableList();
if (data.result) {
uploadSuccess($li, "上传成功");
} else {
uploadFail($li, data.msg);
}
}
});
} else {
uploadFail($li, data.msg);
// refreshTableList();
}
});

// 当文件上传出错时触发
uploader.on('uploadError', function(file) {
uploadFail($('#' + file.id), "上传出错");
});

// 不管成功或者失败,文件上传完成时触发
uploader.on('uploadComplete', function(file) {
if (uploader.getFiles("progress").length <= 0) {
$(".layui-layer-close").show();
}
});
}

function uploadSuccess(item, msg) {
item.find('.file_state').text(msg);
item.find('.file_state').attr("title", msg);
}

function uploadFail(item, msg) {
item.css('color', 'white');
item.find('.file_icon').css('color', 'white');
item.find('.file-mask').css('background', '#d9534f');
item.find('.file_state').text(msg);
item.find('.file_state').attr("title", msg);
item.find('.file_btn').show();
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: