js 自定义压缩文件和文件格式及大小限制

白昼怎懂夜的黑 提交于 2019-11-27 07:56:44

$(function () {
var count = 0;
/*----------------------------------------------文件上传-----------------------------------------*/

window.uploadFile = function (url, filetypes, callback) {

var txt = "文档文件限制20M,压缩文件限制100M,仅支持jpg png gif doc docx ppt pptx xls xlsx zip文件上传,图片和文件请分开上传!";
var option = {
title: "系统提醒",
btn: parseInt("0011", 2),
onOk: function () {
var input = document.createElement("input");
input.setAttribute("type", 'file');
input.setAttribute("id", parseInt(Math.random() * 10000));
input.setAttribute("accept", 'image/*,application/msword,'+
'application/vnd.ms-powerpoint,application/vnd.ms-excel,application/pdf,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/x-zip-compressed');
input.setAttribute("style", 'display:none');
input.setAttribute("multiple", 'multiple');
document.body.appendChild(input);
if (count > 1) input.setAttribute("multiple", 'multiple');
input.onchange = function (event) {
$("body").mLoading("show");
$(".mloading-text").text("文件上传中...");
var fd = new FormData();
var form = new FormData();
var files = input.files;
verification(files, function (res) {
if (res.IsPass) {
if (!res.IsFile) {
url = window.FileuploadServer + "?SaveType=2";
}
var bigfiles = "";
var allPromises = [];
for (var i = 0; i < files.length; i++) {
console.log(files[i]);
let filesize = Math.round(files[i].size / 1024 * 100) / 100;
if (files[i].name.toLowerCase().indexOf("pdf") > -1
|| files[i].name.toLowerCase().indexOf("ppt") > -1
|| files[i].name.toLowerCase().indexOf("pptx") > -1
|| files[i].name.toLowerCase().indexOf("word") > -1
|| files[i].name.toLowerCase().indexOf("doc") > -1
|| files[i].name.toLowerCase().indexOf("docx") > -1
|| files[i].name.toLowerCase().indexOf("xls") > -1
|| files[i].name.toLowerCase().indexOf("xlsx") > -1
|| files[i].name.toLowerCase().indexOf("pdf") > -1
) {
if (filesize > 30720) {
if (bigfiles == "") {
bigfiles = files[i].name;
} else {
bigfiles += "、" + files[i].name;
}
} else {
form.append('file' + i, files[i]);
}
} else if (files[i].name.toLowerCase().indexOf("zip"))
{
if (filesize > 102400) {
if (bigfiles == "") {
bigfiles = files[i].name;
} else {
bigfiles += "、" + files[i].name;
}
} else {
form.append('file' + i, files[i]);
}
}
else if (files[i].name.indexOf("jpeg") > -1
|| files[i].name.toLowerCase().indexOf("png") > -1
|| files[i].name.toLowerCase().indexOf("jpg") > -1
|| files[i].name.toLowerCase().indexOf("gif") > -1
) {
var filename = files[i].name.toLowerCase();
var file = files[i];
if (filesize > 2048) {

allPromises.push(photoCompress(file, { quality: 1 }).then(function (res) {
var data = new Object();
data.filename = filename;
data.basecode = res;
return data;
}))

} else {
form.append('file' + i, files[i]);
}

} else {
$("body").mLoading("hide");
toastr.error("上传文件格式不符合规范");
files = [];
return false;
}

}

if (allPromises.length == 0) {
if (bigfiles != "") {
$("body").mLoading("hide");
toastr.error("以下文件不符合规范:" + bigfiles + ";图片限制为2M、文件限制为20M、压缩文件限制为50M");
} else {

$.ajax({
data: form,
type: "POST",
processData: false,
contentType: false,
url: url,
success: function (res) {
console.log(res);
if (filetypes.indexOf(".jpg") != -1) {

}
res.Alias = [];
document.body.removeChild(input);
if (res.FileNames != undefined) {
if (res.FileNames.length == files.length) {
for (var i = 0; i < res.FileNames.length; i++) {
res.Alias[res.Alias.length] = files[i].name;

}
}
} else {

}
$("body").mLoading("hide");
callback(res);
}
});
}
} else {
Promise
.all(allPromises)
.then(function (results) {
for (var i = 0; i < results.length; i++) {
var bl = convertBase64UrlToBlob(results[i].basecode);
form.append("file", bl, results[i].filename); // 文件对象
}
$.ajax({
data: form,
type: "POST",
processData: false,
contentType: false,
url: url,
success: function (res) {
console.log(res);
if (filetypes.indexOf(".jpg") != -1) {

}
res.Alias = [];

if (res.FileNames != undefined) {
if (res.FileNames.length == files.length) {
for (var i = 0; i < res.FileNames.length; i++) {
res.Alias[res.Alias.length] = files[i].name;

}
}
} else {

}
$("body").mLoading("hide");
callback(res);
}
});
});
}
} else {
$("body").mLoading("hide");
toastr.error("请把图片和文件分开上传!");
}
})


}
input.click();
}
};
window.wxc.xcConfirm(txt, "custom", option,"开始上传","关闭");


}
//验证上传的文件是否为统一类型
function verification(files, callback)
{
var res = new Object();
var FirstIsFile = false;
var OtherIsFile = false;
for (var i = 0; i < files.length; i++) {
if (files[i].name.indexOf("pdf") > -1
|| files[i].name.toLowerCase().indexOf("ppt") > -1
|| files[i].name.toLowerCase().indexOf("pptx") > -1
|| files[i].name.toLowerCase().indexOf("word") > -1
|| files[i].name.toLowerCase().indexOf("doc") > -1
|| files[i].name.toLowerCase().indexOf("docx") > -1
|| files[i].name.toLowerCase().indexOf("xls") > -1
|| files[i].name.toLowerCase().indexOf("xlsx") > -1
|| files[i].name.toLowerCase().indexOf("pdf") > -1
) {
if (i == 0) {
FirstIsFile = true;
} else {
OtherIsFile = true;
}

} else if (files[i].name.toLowerCase().indexOf("zip") > -1) {
if (i == 0) {
FirstIsFile = true;
} else {
OtherIsFile = true;
}
}else if (files[i].name.indexOf("jpeg") > -1
|| files[i].name.toLowerCase().indexOf("png") > -1
|| files[i].name.toLowerCase().indexOf("jpg") > -1
|| files[i].name.toLowerCase().indexOf("gif") > -1
) {
if (i == 0) {
FirstIsFile = false;
} else {
OtherIsFile = false;
}

} else {
res.IsPass = false;

}
if (files.length == 1) {
res.IsPass = true;
res.IsFile = FirstIsFile;
} else {
if (FirstIsFile != OtherIsFile) {
res.IsPass = false;
} else {
res.IsPass = true;
res.IsFile = FirstIsFile;
}
}
}
callback(res);
}
window.delFile = function (keyid, callback)
{
$.post("https://image.centaline-sc.com:/File/delete", { KeyId: keyid }, function (res) {
callback(res);
})
}

/*
三个参数
file:一个是文件(类型是图片格式),
w:一个是文件压缩的后宽度,宽度越小,字节越小
objDiv:一个是容器或者回调函数
photoCompress()
*/
function photoCompress(file, w) {

var ready = new FileReader();
/*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/
ready.readAsDataURL(file);

var p = new Promise(function (resolve, reject) { //做一些异步操作
ready.onload = function () {
var re = ready.result;
resolve(canvasDataURL(re, w));
}

});
return p;
//ready.onload = function () {
// var re = this.result;
// canvasDataURL(re, w, objDiv)
//}


}

function canvasDataURL(path, obj) {
var img = new Image();
img.src = path;
var p = new Promise(function (resolve, reject) { //做一些异步操作
img.onload = function () {
var that = img;
// 默认按比例压缩
var w = that.width,
h = that.height,
scale = w / h;
w = obj.width || w;
h = obj.height || (w / scale);
var quality =0.1; // 默认图片质量为0.7
//生成canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// 创建属性节点
var anw = document.createAttribute("width");
anw.nodeValue = w;
var anh = document.createAttribute("height");
anh.nodeValue = h;
canvas.setAttributeNode(anw);
canvas.setAttributeNode(anh);
ctx.drawImage(that, 0, 0, w, h);
// 图像质量
if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
quality = obj.quality;
}
// quality值越小,所绘制出的图像越模糊
var base64 = canvas.toDataURL('image/jpeg', 0.9);
// 回调函数返回base64的值
resolve(base64);
}

});
return p;
}
/**
* 将以base64的图片url数据转换为Blob
* @param urlData
* 用url方式表示的base64图片数据
*/
function convertBase64UrlToBlob(urlData) {
var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
}

})

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!