asp.net mvc 中前端多张图片压缩上传功能实现

由于网站需要上传多张图片，图片原始大小太大了，都是几M的，同时解决了图片在手机端旋转问题和对大分辨的图片进行等比例缩小

前台代码：

@{
    Layout = "~/Views/Shared/_MyLayoutPage.cshtml";
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <script src="~/Scripts/bootstrap.min.js"></script>
    <link href="~/Scripts/tinyImgUpload/css/tinyImgUpload.css" rel="stylesheet" />
    <script src="~/Scripts/tinyImgUpload/js/tinyImgUpload.js"></script>
    <title>UpLoadPicPage</title>

    <script>
        function uploadImg() {
            var eleList = document.querySelectorAll("#upload");
            var ele = eleList[0].querySelector('#img-container');
            var formData = new FormData();
            for (var i = 0, f; f = ele.files[i]; i++) {
                formData.append('files'+i, f);
            }
          $.ajax({
            url: "/PicManager/AddPicPage",
            type: "post",
            async: false,
            contentType: false,
            processData: false,
            data: formData,
              success: function (data) {
                  if (data == "ok") {
                  
                      window.location.href = "@Url.Action("UserLoginPage", "Login")";         
                  } else {
                      alert("上传图片失败");
                  }
                 
            },
            error: function (data) {

            }
        });
        }


    </script>
</head>
<body>
    <div class="container" style="margin-top:70px;">

        <form id="formtable" enctype="multipart/form-data" method="post">


            <div id="upload"></div>

    <a style=" cursor:pointer; border-radius:5px; margin-top:10px; 60px; display:block; height:30px; text-align:center;line-height:30px; background-color:#00CCFF;border:0;letter-spacing:10px; color:#fff;" class="submit">上传</a>
    </form>
            </div>
    <script>
        var upload = tinyImgUpload('#upload', 1);
        document.getElementsByClassName('submit')[0].onclick = function (e) {

            uploadImg();
        }
    </script>
</body>
</html>

　tinyImgUpload.css

body {

font-size:14px;
}
#img-container {

}
#img-container:after {
    content: '.';
    display: block;
    height: 0;
    visibility: hidden;
    overflow: hidden;
    clear: both;
}
.img-item {
    position: relative;
    float: left;
    margin-right: 0.1875rem;
    margin-bottom: 0.1875rem;
    height: 7rem;
     7rem;
    box-sizing: border-box;
}
.img-thumb {
    border: 1px solid #000;
    margin-right: 7px;
}
.thumb-icon {
     100%;
    height: 100%;
}
.img-up-add {
    display: table;
    border: 1px dashed #E0E0E0;
}
.img-add-icon {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    line-height:normal;

}
.img-remove {
    position: absolute;
    right: -0.1875rem;
    top: -0.1875rem;
    display: block;
     2rem;
    height: 2rem;
    border-radius: 50%;
    background: #f7333d;
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-size: 0.25rem;
    overflow: hidden;
    background-clip: padding-box;
}
#img-file-input {
    display: none;
}

tinyImgUpload.js

/**
* tinyImgUpload
* @param ele [string] [生成组件的元素的选择器]
* @param options [Object] [对组件设置的基本参数]
* options具体参数如下
* path 图片上传的地址路径必需
* onSuccess(res) 文件上传成功后的回调参数为返回的文本必需
* onFailure(res) 文件上传失败后的回调参数为返回的文本必需
* @return [function] [执行图片上传的函数]
* 调用方法
* tinyImgUpload('div', options)
*/
function tinyImgUpload(ele, options) {
// 用于压缩图片的canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext('2d');

// 瓦片canvas
var tCanvas = document.createElement("canvas");
var tctx = tCanvas.getContext("2d");

// 为添加按钮绑定点击事件，设置选择图片的功能
var addBtn = document.querySelector('.img-up-add');
addBtn.addEventListener('click', function () {
document.querySelector('#img-file-input').value = null;
document.querySelector('#img-file-input').click();
return false;
}, false)
// 使用canvas对大图片进行压缩
function compress(img, Orientation) {
var maxW = 1080;//设置最大宽度
var maxH = 1080;
var initSize = img.src.length;

canvas.width = width;
canvas.height = height;

// 铺底色
ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, canvas.width, canvas.height);
//如果图片像素大于100万则使用瓦片绘制
var count;
if ((count = width * height / 1000000) > 1) {
count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片

// 计算每块瓦片的宽和高
var nw = ~~(width / count);
var nh = ~~(height / count);

tCanvas.width = nw;
tCanvas.height = nh;

for (var i = 0; i < count; i++) {
for (var j = 0; j < count; j++) {
tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);

ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
}
}
} else {
ctx.drawImage(img, 0, 0, width, height);
}
//修复ios上传图片的时候被旋转的问题
if (Orientation != "" && Orientation != 1) {
switch (Orientation) {
case 6://需要顺时针（向左）90度旋转
rotateImg(img, 'left', canvas);
break;
case 8://需要逆时针（向右）90度旋转
rotateImg(img, 'right', canvas);
break;
case 3://需要180度旋转
rotateImg(img, 'right', canvas);//转两次
rotateImg(img, 'right', canvas);
break;
}
}
//进行最小压缩
var ndata = canvas.toDataURL('image/jpeg', 0.5);

console.log('压缩前：' + initSize);
console.log('压缩后：' + ndata.length);
console.log('压缩率：' + ~~(100 * (initSize - ndata.length) / initSize) + "%");

tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;

return ndata;
}

function handleFileSelect(evt) {

let Orientation;

//去获取拍照时的信息，解决拍出来的照片旋转问题
EXIF.getData(f, function () {
Orientation = EXIF.getTag(this, 'Orientation');
});
if (!tip) {
// 图片文件绑定到容器元素上

var reader = new FileReader();
reader.onload = (function (theFile) {
var FfileName = theFile.name;//传文件名用的
return function (e) {
console.log(FfileName);
var result = e.target.result;
var img = new Image();
img.src = result;

//如果图片大小小于100kb，则直接上传
//if (result.length <= maxsize) {
// ele.files.push(theFile);
// img = null;

// var oDiv = document.createElement('div');
// oDiv.className = 'img-thumb img-item';
// // 向图片容器里添加元素
// oDiv.innerHTML = '<img class="thumb-icon" src="' + result + '" />' +
// '<a href="javscript:;" class="img-remove">x</a>'

// ele.insertBefore(oDiv, addBtn);
// return;
//} else {

// 图片加载完毕之后进行压缩，然后上传
if (img.complete) {
callback();
} else {
img.onload = callback;
}
// }
function callback() {

img = null;
}
};
})(f);

reader.readAsDataURL(f);
}
}
}
document.querySelector('#img-file-input').addEventListener('change', handleFileSelect, false);

// 删除图片
function removeImg(evt) {
if (evt.target.className.match(/img-remove/)) {
console.log('3', ele.files);
// 获取删除的节点的索引
function getIndex(ele) {

if (ele && ele.nodeType && ele.nodeType == 1) {
var oParent = ele.parentNode;
var oChilds = oParent.children;
for (var i = 0; i < oChilds.length; i++) {
if (oChilds[i] == ele)
return i;
}
} else {
return -1;
}
}
// 根据索引删除指定的文件对象
var index = getIndex(evt.target.parentNode);
ele.removeChild(evt.target.parentNode);
if (index < 0) {
return;
} else {
ele.files.splice(index, 1);
}
console.log('4', ele.files);
}
}
ele.addEventListener('click', removeImg, false);

// 上传图片
function uploadImg() {
console.log(ele.files);

var xhr = new XMLHttpRequest();
var formData = new FormData();

for (var i = 0, f; f = ele.files[i]; i++) {
formData.append('files', f);
}

console.log('1', ele.files);
console.log('2', formData);

}
return uploadImg;
}

效果图：

相关阅读:
LOJ 6192 城市网络（树上倍增）
SDOI2010代码拍卖会（计数类DP）
失控的未来交通工具（LOJ 508，带权并查集，数论）
线段树维护区间前k小
POJ 1966 Cable TV Network （最大流最小割）
网络流学习笔记
最大子矩阵和
POJ 1723 Soldiers (中位数)
最大子矩阵求法详解
CH0805 防线 (二分值域，前缀和，特殊性质)

原文地址：https://www.cnblogs.com/Vinkong/p/13496672.html