压缩部分是从网上搞下来的,上传部分是自己写的，相当于在其他人的基础上完善了这个压缩上传流程。
压缩部分，压缩率一般，重在浏览器支持方面好些，使用了FileReader和Canvas实现，FileReader浏览器支持方面还不错：
上传部分，使用XMLHttpRequest上传Blob实现，浏览器方面比FileReader差一点，不过也差不了多少，主要在安卓浏览器方面差一些：
大概根据上图总结能支持到IE10及以上版本、大多数现代浏览器及多数安卓与ios浏览器。
为了保持ie浏览器尽量向下支持，所以用的方法不算太多，压缩比可能对比其他压缩插件不大。
开发时为了方便，插件需要jQuery支持，插件需要放在jQuery之后加载。
使用方法：
- UploadPic.prototype.init为插件的配置核心位置，里面有图片限制大小、格式限制和大小限制
- 框件初始加载与绑定需要改为input的ID；
- UploadPic.prototype.url配置上传地址，也可以在UploadPic.prototype.init中配置。
- UploadPic.prototype.uploadResult和UploadPic.prototype.changeAction为自定义上传后方法和input的change的自定义方法，随便写，为了方便留的两个方法里面写了些默认的方法，单图上传防止js崩溃，不想要就删掉就行，方法内支持全局变量，想要定义插件内用的变量就this.变量名就行。
- 文本框选择图片默认进行上传，有时间再改一下按钮上传。
如果上传时提示上传失败,检查上传地址是否正确并且控制台提示Access-Control-Allow-Origin啥啥的就是服务接收段需要允许跨域，例如php需要加上
header( "Access-Control-Allow-Origin:*" );
下面是源码
html页面：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片压缩上传</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script src="UploadPic.js"></script>
</head>
<body>
<input id="files" type="file" accept="image/*;capture=camera" class="input">
</body>
</html>
UploadPic.js：
$("#files").ready(UploadPic_init);//框件初始加载与绑定
/**
* 初始化UploadPic
* @constructor
*/
function UploadPic_init() {
UploadPic.prototype.url = '';//初始上传url
var u = new UploadPic();
u.init({
input: document.querySelector("#files"),//框件绑定
callback: function (base64) {
var _this=this;
//获取图片类型
var typ = base64.match(/data:image\/([^\"]*)\;base64/);
//base64 转 blob
var ccBlob= _this._getBlobBydataURI(base64,'image/'+typ[1]);
if(ccBlob.size>_this.fileSize){
ccBlob=_this.input.files[0];
}
var formData = new FormData();
var filname="file_"+_this.fileName+"."+typ[1];
formData.append("files", ccBlob ,filname);
//组建XMLHttpRequest 上传文件
var request = new XMLHttpRequest();
//上传连接地址
request.open("POST", _this.url);
request.onreadystatechange=function()
{
if (request.readyState==4)
{
if(request.status==200){
console.log(request.response);
_this.uploadResult(request.response);
_this.emptyFile();
}else{
alert("上传失败,检查上传地址是否正确");
_this.emptyFile();
}
}
}
request.send(formData);
},
loading: function () {
}
});
}
/**
* UploadPic
* 初始化配置 init
* 自定义文件框架change动作 changeAction
* 自定义上传结果动作 uploadResult
*/
function UploadPic() {
this.isrun=0;
this.sw = 0;
this.sh = 0;
this.tw = 0;
this.th = 0;
this.scale = 0;
this.maxWidth = 0;
this.maxHeight = 0;
this.maxSize = 0;
this.fileSize = 0;
this.fileDate = null;
this.fileType = '';
this.fileName = '';
this.input = null;
this.canvas = null;
this.mime = {};
this.type = '';
this.callback = function () {};
this.loading = function () {};
}
/**
* 初始化
*/
UploadPic.prototype.init = function (options) {
this.maxWidth = options.maxWidth || 1080;//图片最大宽度
this.maxHeight = options.maxHeight || 1024;//图片最大高度
this.maxSize = options.maxSize || 50 * 1024 * 1024;//图片限制大小
this.input = options.input;
this.mime = {'png': 'image/png', 'jpg': 'image/jpeg', 'jpeg': 'image/jpeg', 'bmp': 'image/bmp'};
this.callback = options.callback || function () {};
this.loading = options.loading || function () {};
this.url = this.url? this.url : "http://127.0.0.1/upload.php";
this._addEvent();//绑定change事件
};
/**
* @description 绑定事件
* @param {Object} elm 元素
* @param {Function} fn 绑定函数
*/
UploadPic.prototype._addEvent = function () {
var _this = this;
function tmpSelectFile(ev) {
var icontinue=_this.changeAction();//自定义change事件
if(!icontinue){return;}
_this._handelSelectFile(ev.target.files[0]);
}
this.input.addEventListener('change', tmpSelectFile, false);
};
/**
* @description 加载图片
* @param {Object} ev 元素
* */
UploadPic.prototype._handelSelectFile = function (ev) {
var file = ev;
try{
this.type = file.type;
}catch(e){
this.isrun=0;
this.emptyFile();
return;
}
// 如果没有文件类型，则通过后缀名判断（解决微信及360浏览器无法获取图片类型问题）
if (!this.type) {
this.type = this.mime[file.name.match(/\.([^\.]+)$/i)[1]];
}
if (!/image.(png|jpg|jpeg|bmp)/.test(this.type)) {
alert('选择的文件类型不是图片');
return;
}
if (file.size > this.maxSize) {
alert('选择文件大于' + this.maxSize / 1024 / 1024 + 'M，请重新选择');
return;
}
this.fileName = this._muuid();
this.fileSize = file.size;
this.fileType = this.type;
this.fileDate = file.lastModifiedDate;
this._readImage(file);
};
/**
* @description 读取图片文件
* @param {Object} image 图片文件
*/
UploadPic.prototype._readImage = function (file) {
var _this = this;
function tmpCreateImage(uri) {
_this._createImage(uri);
}
this.loading();
this._getURI(file, tmpCreateImage);
};
/**
* @description 通过文件获得URI
* @param {Object} file 文件
* @param {Function} callback 回调函数，返回文件对应URI
* return {Bool} 返回false
*/
UploadPic.prototype._getURI = function (file, callback) {
try{
var reader = new FileReader();
}catch(e){
alert('图片上传失败，请升级浏览器');
return;
}
var _this = this;
function tmpLoad() {
// 头不带图片格式，需填写格式
var re = /^data:base64,/;
var ret = this.result + '';
if (re.test(ret)) ret = ret.replace(re, 'data:' + _this.mime[_this.fileType] + ';base64,');
callback && callback(ret);
}
reader.onload = tmpLoad;
reader.readAsDataURL(file);
return false;
};
/**
* @description 创建图片
* @param {Object} image 图片文件
*/
UploadPic.prototype._createImage = function (uri) {
var img = new Image();
var _this = this;
function tmpLoad() {
_this._drawImage(this);
}
img.onload = tmpLoad;
img.src = uri;
};
/**
* @description 创建Canvas将图片画至其中，并获得压缩后的文件
* @param {Object} img 图片文件
* @param {Number} width 图片最大宽度
* @param {Number} height 图片最大高度
* @param {Function} callback 回调函数，参数为图片base64编码
* return {Object} 返回压缩后的图片
*/
UploadPic.prototype._drawImage = function (img, callback) {
this.sw = img.width;
this.sh = img.height;
this.tw = img.width;
this.th = img.height;
this.scale = (this.tw / this.th).toFixed(2);
if (this.sw > this.maxWidth) {
this.sw = this.maxWidth;
this.sh = Math.round(this.sw / this.scale);
}
if (this.sh > this.maxHeight) {
this.sh = this.maxHeight;
this.sw = Math.round(this.sh * this.scale);
}
this.canvas = document.createElement('canvas');
var ctx = this.canvas.getContext('2d');
this.canvas.width = this.sw;
this.canvas.height = this.sh;
ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, this.sw, this.sh);
this.callback(this.canvas.toDataURL(this.type));
ctx.clearRect(0, 0, this.tw, this.th);
this.canvas.width = 0;
this.canvas.height = 0;
this.canvas = null;
};
/**
* 根据base64 内容 取得 bolb
*/
UploadPic.prototype._getBlobBydataURI = function (dataURI,type) {
var binary = atob(dataURI.split(',')[1]);
var array = [];
for(var i = 0; i < binary.length; i++) {
array.push(binary.charCodeAt(i));
}
return new Blob([new Uint8Array(array)], {type:type });
};
/**
* 生成uuid
*/
UploadPic.prototype._muuid = function () {
var s = [];
var hexDigits = "0123456789abcdef";
for (var i = 0; i < 36; i++) {
s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
}
s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
s[8] = s[13] = s[18] = s[23] = "-";
var uuid = s.join("");
return uuid;
};
/**
* 清空file
*/
UploadPic.prototype.emptyFile = function () {
var file = $("#"+this.input.id);
file.after(file.clone().val(""));
file.remove();
this.input=document.querySelector("#"+this.input.id);
file.ready(this._addEvent());
};
/**
* 自定义文件框件change动作
*/
UploadPic.prototype.changeAction = function () {
if(this.isrun==0){
this.isrun=1;
}else{
alert("上传失败,有图片未上传完成");
//清空file
this.emptyFile();
return false;//终止程序标识
}
this.fileName=this._muuid();
return true;//继续程序标识
};
/**
* 自定义上传结果
*/
UploadPic.prototype.uploadResult = function (json) {
this.isrun=0;
alert("上传完成");
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。