input[type='file'] img圖片上傳

圖片上傳在網站開發中，其是在移動端，是很常見的一個功能，在網上類似的教程也很多，有很多雖然功能強大，但是佈局卻是成了制約我們使用的最大因素，還有就是在移動端圖片太大很難上傳成功，最近發現了一個比較靈活的圖片上傳方法，分享給大家，代碼如下：

/**
     * 獲得base64
     * @param {Object} obj
     * @param {Number} [obj.width] 圖片需要壓縮的寬度，高度會跟隨調整
     * @param {Number} [obj.quality=0.8] 壓縮質量，不壓縮爲1
     * @param {Function} [obj.before(this, blob, file)] 處理前函數,this指向的是input:file
     * @param {Function} obj.success(obj) 處理後函數
     * @example
     *
     */
    $.fn.localResizeIMG = function(obj) {
        this.on('change', function() {
            var file = this.files[0];
            var URL = window.URL || window.webkitURL;
            var blob = URL.createObjectURL(file);

            // 執行前函數
            if ($.isFunction(obj.before)) {
                obj.before(this, blob, file)
            };

            _create(blob, file);
            this.value = ''; // 清空臨時數據
        });

        /**
         * 生成base64
         * @param blob 通過file獲得的二進制
         */
        function _create(blob) {
            var img = new Image();
            img.src = blob;

            img.onload = function() {
                var that = this;

                //生成比例
                var w = that.width,
                    h = that.height,
                    scale = w / h;
                w = obj.width || w;
                h = w / scale;

                //生成canvas
                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');
                $(canvas).attr({
                    width: w,
                    height: h
                });
                ctx.drawImage(that, 0, 0, w, h);

                /**
                 * 生成base64
                 * 兼容修復移動設備需要引入mobileBUGFix.js
                 */
                var base64 = canvas.toDataURL('image/jpeg', obj.quality || 0.8);

                // 修復IOS
                if (navigator.userAgent.match(/iphone/i)) {
                    var mpImg = new MegaPixImage(img);
                    mpImg.render(canvas, {
                        maxWidth: w,
                        maxHeight: h,
                        quality: obj.quality || 0.8
                    });
                    base64 = canvas.toDataURL('image/jpeg', obj.quality || 0.8);
                }

                // 修復android
                if (navigator.userAgent.match(/Android/i)) {
                    var encoder = new JPEGEncoder();
                    base64 = encoder.encode(ctx.getImageData(0, 0, w, h), obj.quality * 100 || 80);
                }

                // 生成結果
                var result = {
                    base64: base64,
                    clearBase64: base64.substr(base64.indexOf(',') + 1)
                };

                // 執行後函數
                obj.success(result);
            };
        }
    };

調用也很方便：

 $('input:file').localResizeIMG({
        width: 100,
        quality: 0.1,
        //before: function (that, blob) {},
        success: function (result) {
            var img = new Image();
            img.src = result.base64;
            $('body').append(img);
            console.log(result);
        }
    });。

這裏獲取result.base64 url 路徑之後需要將之傳到後臺，經過後臺處理成功回調返回一個路徑，這個路徑就是我們所上傳圖片位置。