引用脚本下载地址 提取码:t9bp
<link href="webuploader-0.1.5/css/uploadify.css" rel="stylesheet" />
<link href="webuploader-0.1.5/css/webuploader.css" rel="stylesheet" />
<script src="webuploader-0.1.5/dist/webuploader.js"></script>
<script src="js/jquery-extend.js"></script>
<script src="js/jquery.unobtrusive-ajax.js"></script>
<script src="js/layer/layer.js"></script>
<script>
$(function () {
//显示验证信息
function validateMessage(file, show, message) {
var $li = $('#' + file.id);
if (show) {
$li.find('.cancel').show();
} else {
$li.find('.cancel').hide();
}
$li.find('span.data').text('-' + message);
};
//上传文件
$("#id").click(function () {
//页面层
layer.open({
type: 1,
title: "上传文件",
skin: 'layui-layer-rim', //加上边框
area: '540px', //宽高
content: '<div id="uploader" class="wu-example">' +
'<div id="thelist" class="uploader-list" style="min-height: 420px;"></div>' +
'<div class="btns" style="display: inline-block;margin: 10px 170px;">' +
'<div id="picker" style="display: inline-block;margin-right: 10px;">选择文件</div>' +
'<div id="ctlBtn" class="webuploader-pick">开始上传</div>' +
'</div>' +
'</div>',
end: function () {
//layer.load();
//window.location.reload();
}
});
var $list = $('#thelist'),
$btn = $('#ctlBtn'),
state = 'pending',
uploader;
uploader = WebUploader.create({
chunked: true,
swf: '/Content/webuploader-0.1.5/dist/Uploader.swf',
threads: 1,
chunkSize: 100000,//每片大小
server: '后台请求地址',
pick: '#picker'
});
// 当有文件添加进来的时候
uploader.on('fileQueued', function (file) {
$list.append('<div id="' + file.id + '" title="' + file.name + '" class="uploadify-queue-item">' +
'<div class="cancel" data-id="' + file.id + '">' +
'<a href="javascript:">X</a>' +
'</div>' +
'<span class="fileName">' + $.omit(file.name, 25) + '(约' + $.bytesToSize(file.size) + ')</span>' +
'<span class="data"> - 0%</span>' +
'<div class="uploadify-progress">' +
'<div class="uploadify-progress-bar" style="width: 0%;">' +
'</div>' +
'</div>' +
'</div>');
});
//删除文件队列
$(".uploader-list").on("click", ".cancel[data-id]", function () {
var $this = $(this);
$('#' + $this.data("id")).remove();
uploader.removeFile(uploader.getFile($this.data("id")));
});
//每个文件上传是重新生成唯一标识GUID
uploader.on('uploadStart', function (file) {
$('#' + file.id).find('.cancel').hide();
uploader.option("formData", { guid: $.NewGuid(), name: file.name });
});
//分片上次时,上传每片服务器所响应的数据
uploader.on('uploadAccept', function (obj, ret) {
//服务器已存在该文件
if (!ret.code && ret.code === 0) {
uploader.cancelFile(obj.file);
validateMessage(obj.file, true, "文件已存在");
}
});
// 文件上传过程中创建进度条实时显示。
uploader.on('uploadProgress', function (file, percentage) {
var $li = $('#' + file.id),
$percent = $li.find('.uploadify-progress .uploadify-progress-bar');
var $width = percentage * 100;
$li.find('span.data').text('-' + $width.toPrecision(3) + '%');
$percent.css('width', $width + '%');
});
//上传成功
uploader.on('uploadSuccess', function (file, response) {
validateMessage(file, false, response.message)
});
//上传错误
uploader.on('uploadError', function (file) {
validateMessage(file, true, "-上传出错");
});
//验证错误
uploader.on('error', function (file) {
validateMessage(file, true, "-上传出错");
});
$btn.on('click', function () {
if (state === 'uploading') {
uploader.stop();
} else {
uploader.upload();
}
});
});
});
</script>