<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>上传</title>
<script src="js/jquery.js"></script>
<link rel="stylesheet" href="js/webuploader.css">
<script src="js/webuploader.js"></script>
</head>
<body>
<input type="file" name="upload" id="upload" onchange="addFile(this)">
<div>
<ul id="imageList">
</ul>
</div>
<div id="uploader">
<!--用来存放文件信息-->
<div id="thelist"></div>
<div>
<div id="picker">上传</div>
<button id="ctlBtn" class="btn btn-default">开始上传</button>
</div>
</div>
<input type="button" value="是否上传完成" onclick="checkUpload()">
<script>
function addFile(that) {
let file = that.files[0];
console.log(file);
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (event) {
console.log(event);
let img = new Image();
img.src = event.target.result;
img.onload = function () {
console.log(this.width);
console.log(this.height)
}
}
}
//使用webuploader上传
var uploader = WebUploader.create({
// swf文件路径
swf: '/js/Uploader.swf',
// 文件接收服务端。
server: 'https://localhost:6534/api/Upload/index',
// 选择文件的按钮,可以是Id，也可以是class
pick: {
id: "#picker",
innerHTML: "选择文件", //指定按钮文字
multiple: false //是否开起同时选择多个文件能力
},
//设定上传文件类型
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
},
//是否自动上传文件
auto: true,
//文件上传请求的参数表，每次发送都会发送此对象中的参数
formData: {
fileId: "d172867a-6b31-4530-82a4-6b4e8bd4bcaa"
},
//设置文件上传域的name,默认为file
fileVal: 'files',
//验证文件总数量, 超出则不允许加入队列
fileNumLimit: 1,
//验证文件总大小是否超出限制, 超出则不允许加入队列单位为b
fileSizeLimit: 2 * 1024 * 1024,
//验证单个文件大小是否超出限制, 超出则不允许加入队列。
fileSingleSizeLimit: 2 * 1024 * 1024,
// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
resize: false
});
//当文件被加入队列之前触发，此事件的handler返回值为false，则此文件不会被添加进入队列
//此处获取图片宽高，可以限制上传图片的宽高(获取宽高是异步方法，此事件中只支持同步，所以文件
//会正常加入到队列中，回调时判断队列中是否存在此文件，存在就删除掉)
uploader.on("beforeFileQueued", function (file) {
let middleFile = file.source;
//获取到上传的图片文件file
let uploadFile = middleFile.source;
//判断图片宽高是否操出设定宽高
ValidImgWidAndHei(uploadFile, 200, 200).then(res => {
if (!res) {
//判断文件是否加入到队列中，如果加入了则删除
if (uploader.getFile(file.id) !== undefined) {
console.log(file)
alert("宽高超标");
uploader.removeFile(file, true);
}
}
return res;
});
});
//当文件被加入到队列之后触发
uploader.on("fileQueued", function (file) {
console.log("加入到队列");
let $li = $('<li id = "' + file.id + '" class = "file-item thumbnail upload-img-box"> <img></li>');
let $img = $li.find('img');
let $ul = $("#imageList");
$ul.append($li);
//创建缩略图
uploader.makeThumb(file, function (error, src) {
if (error) {
$img.replaceWith('<span>不能预览</span>');
return;
}
$img.attr("src", src);
}, 100, 30);
});
//创建进度条
uploader.on("uploadProgress", function (file, percentage) {
let $li = $('#' + file.id);
let $percent = $li.find('.progress span');
//避免重复创建
if (!$percent.length) {
$percent = $('<p><span>上传中</span></p><div class=".progress .progress-bar"').appendTo($li).find('span');
}
$percent.css('width', percentage * 100 + '%');
});
//当文件被移除队列后触发
uploader.on("fileDequeued", function (file) {
console.log("移除队列");
});
//当开始上传流程时触发
uploader.on("startUpload", function () {
console.log("开始上传");
});
//当validate不通过时，会以派送错误事件的形式通知调用者。
uploader.on("error", function (type) {
console.log(type);
let err = ""
switch (type) {
case "F_EXCEED_SIZE":
err = "单个文件超出设定大小"
break;
case "Q_EXCEED_SIZE_LIMIT":
err = "总上传文件超出设定大小"
break;
case "Q_EXCEED_NUM_LIMIT":
err = "队列中的数量超出设定个数"
break;
case "Q_TYPE_DENIED":
err = "文件类型不符合设定类型";
break;
default:
err = type;
break;
}
alert(err);
});
$("#ctlBtn").click(function () {
console.log("开始");
uploader.upload();
});
//isInProgress()是否正在上传中,true正在上传
function checkUpload() {
console.log("是否正在上传中");
console.log(uploader.isInProgress())
}
/**
校验图片宽高是否超过指定的宽高
*/
function ValidImgWidAndHei(file, width, height) {
return new Promise(function (resolve, reject) {
const reader = new FileReader();
const image = new Image();
reader.addEventListener('load', e => image.src = e.target.result);
image.addEventListener('load', () => resolve(image.width < width && image.height < height));
reader.readAsDataURL(file);
})
}
</script>
</body>
</html>
