簡(jiǎn)單的js圖片壓縮上傳，支持IE10及以上瀏覽器

blair 發(fā)布于2019-08-26 11:38 / 2475人閱讀

摘要：壓縮部分是從網(wǎng)上搞下來(lái)的上傳部分是自己寫的，相當(dāng)于在其他人的基礎(chǔ)上完善了這個(gè)壓縮上傳流程。文本框選擇圖片默認(rèn)進(jìn)行上傳，有時(shí)間再改一下按鈕上傳。

壓縮部分是從網(wǎng)上搞下來(lái)的,上傳部分是自己寫的，相當(dāng)于在其他人的基礎(chǔ)上完善了這個(gè)壓縮上傳流程。

壓縮部分，壓縮率一般，重在瀏覽器支持方面好些，使用了FileReader和Canvas實(shí)現(xiàn)，F(xiàn)ileReader瀏覽器支持方面還不錯(cuò)：

上傳部分，使用XMLHttpRequest上傳Blob實(shí)現(xiàn)，瀏覽器方面比FileReader差一點(diǎn)，不過(guò)也差不了多少，主要在安卓瀏覽器方面差一些：

大概根據(jù)上圖總結(jié)能支持到IE10及以上版本、大多數(shù)現(xiàn)代瀏覽器及多數(shù)安卓與ios瀏覽器。

為了保持ie瀏覽器盡量向下支持，所以用的方法不算太多，壓縮比可能對(duì)比其他壓縮插件不大。
開(kāi)發(fā)時(shí)為了方便，插件需要jQuery支持，插件需要放在jQuery之后加載。

使用方法：

UploadPic.prototype.init為插件的配置核心位置，里面有圖片限制大小、格式限制和大小限制

框件初始加載與綁定需要改為input的ID；

UploadPic.prototype.url配置上傳地址，也可以在UploadPic.prototype.init中配置。

UploadPic.prototype.uploadResult和UploadPic.prototype.changeAction為自定義上傳后方法和input的change的自定義方法，隨便寫，為了方便留的兩個(gè)方法里面寫了些默認(rèn)的方法，單圖上傳防止js崩潰，不想要就刪掉就行，方法內(nèi)支持全局變量，想要定義插件內(nèi)用的變量就this.變量名就行。

文本框選擇圖片默認(rèn)進(jìn)行上傳，有時(shí)間再改一下按鈕上傳。

如果上傳時(shí)提示上傳失敗,檢查上傳地址是否正確并且控制臺(tái)提示Access-Control-Allow-Origin啥啥的就是服務(wù)接收段需要允許跨域，例如php需要加上
header( "Access-Control-Allow-Origin:*" );

下面是源碼
html頁(yè)面：



    
        
        圖片壓縮上傳

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 轉(zhuǎn) 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動(dòng)作 changeAction
* 自定義上傳結(jié)果動(dòng)作 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 綁定函數(shù)
*/
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;
    }

    // 如果沒(méi)有文件類型，則通過(guò)后綴名判斷（解決微信及360瀏覽器無(wú)法獲取圖片類型問(wèn)題）
    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，請(qǐng)重新選擇");
        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 通過(guò)文件獲得URI
* @param {Object} file 文件
* @param {Function} callback 回調(diào)函數(shù)，返回文件對(duì)應(yīng)URI
* return {Bool} 返回false
*/
UploadPic.prototype._getURI = function (file, callback) {
    try{
        var reader = new FileReader();
    }catch(e){
        alert("圖片上傳失敗，請(qǐng)升級(jí)瀏覽器");
        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 創(chuàng)建圖片
* @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 創(chuàng)建Canvas將圖片畫至其中，并獲得壓縮后的文件
* @param {Object} img 圖片文件
* @param {Number} width 圖片最大寬度
* @param {Number} height 圖片最大高度
* @param {Function} callback 回調(diào)函數(shù)，參數(shù)為圖片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;
};

/**
* 根據(jù)base64 內(nèi)容 取得 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;
};

/**
* 清空f(shuō)ile
*/
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動(dòng)作
*/
UploadPic.prototype.changeAction = function () {
    if(this.isrun==0){
        this.isrun=1;
    }else{
        alert("上傳失敗,有圖片未上傳完成");
        //清空f(shuō)ile
        this.emptyFile();
        return false;//終止程序標(biāo)識(shí)
    }
    this.fileName=this._muuid();
    return true;//繼續(xù)程序標(biāo)識(shí)
};

/**
* 自定義上傳結(jié)果
*/
UploadPic.prototype.uploadResult = function (json) {
    this.isrun=0;
    alert("上傳完成");
}