WebUploader

最新推荐文章于 2022-11-20 17:17:36 发布

xiexuzhao

最新推荐文章于 2022-11-20 17:17:36 发布

阅读量107

点赞数

分类专栏：程序

本文链接：https://blog.csdn.net/xiexuzhao/article/details/102397592

版权

程序专栏收录该内容

278 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<link href="dist/webuploader.css" rel="stylesheet" type="text/css" />
<script src="../../js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="dist/webuploader.min.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="uploader" class="wu-example">

<div id="thelist" class="uploader-list"></div>
<div class="btns">
<div id="picker">选择文件</div>
<button id="ctlBtn" class="btn btn-default">开始上传</button>
</div>
</div>
</form>

});

// 当文件被加入队列之前触发，此事件的handler返回值为false，则此文件不会被添加进入队列。
uploader.on('beforeFileQueued', function (file) {
// 限制图片数量
img_length = $("#thelist img").length;
if (img_length >= 6) {
layer.msg("图片最多上传6张");
return false;
}

});

// 当有文件添加进来的时候
uploader.on('fileQueued', function (file) {
var $li = $(
'<div id="' + file.id + '" class="file-item thumbnail col-sm-3" style="width:150px;margin-left:10px;">' +
'<img>' +
'<div class="info">' + file.name + '</div>' +
'<span style="margin-left: 78%;cursor:pointer;" οnclick="deleteFile(this)">删除</span>' +
'</div>'
),
$img = $li.find('img');
// $list为容器jQuery实例
$("#thelist").append($li);
// 创建缩略图
// 如果为非图片文件，可以不用调用此方法。
// thumbnailWidth x thumbnailHeight 为 100 x 100
uploader.makeThumb(file, function (error, src) {
if (error) {
$img.replaceWith('<span>不能预览</span>');
return;
}
$img.attr('src', src);
}, 150, 150);

});

// 文件上传成功，给item添加成功class, 用样式标记上传成功。
uploader.on('uploadSuccess', function (file) {
$('#' + file.id).addClass('upload-state-done');
var $li = $('#' + file.id),
$done = $li.find('div.upload-state-done');
// 避免重复创建
if (!$done.length) {
$done = $('<div class=""></div>').appendTo($li);
}
$done.html('<font color="blue">上传成功</font>');
});

// 文件上传失败，显示上传出错。
uploader.on('uploadError', function (file) {
var $li = $('#' + file.id),
$error = $li.find('div.error');
// 避免重复创建
if (!$error.length) {
$error = $('<div class="error"></div>').appendTo($li);
}
$error.html('<font color="red">上传失败</font>');
});

$("#ctlBtn").click(function () {
uploader.upload();
})

})

function deleteFile(obj) {
$(obj).parent().remove();
}
</script>
</body>
</html>