モバイル端末html 5画像のアップロード方法【アンドロイドIOSと微信の互換性が向上】

 
 
 
 
 
 
 
 
 
 
 

     
 
 

 
document.addEventListener('DOMContentLoaded', init, false); 
 
function init() { 
var u = new UploadPic(); 
u.init({ 
    input: document.querySelector('.input'), 
    callback: function (base64) { 
         $.ajax({ 
            url:"upload.php", 
            data:{str:base64,type:this.fileType}, 
            type:'post', 
            dataType:'json', 
            success:function(i){ 
                 alert(i.info); 
            } 
         }) 
        }, 
        loading: function () { 

        } 
}); 
} 
 
function UploadPic() { 
    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 || 800;
        this.maxHeight = options.maxHeight || 600;
        this.maxSize = options.maxSize || 3 * 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._addEvent();
    };

    /** 
     * @description      
     * @param {Object} elm    
     * @param {Function} fn      
     */
    UploadPic.prototype._addEvent = function () {
        var _this = this;

        function tmpSelectFile(ev) {
            _this._handelSelectFile(ev);
        }

        this.input.addEventListener('change', tmpSelectFile, false);
    };

    /** 
     * @description      
     * @param {Object} elm    
     * @param {Function} fn      
     */
    UploadPic.prototype._handelSelectFile = function (ev) {
        var file = ev.target.files[0];

        this.type = file.type

//         ，        （     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 = file.name;
        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) {
        var reader = new FileReader();
        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;
    };
 
 

以上がHTML部分
以下、PHP部分
この部分はアップロード後ajaxがbase 64コードをphpに送信し、
base 64コードにはピクチャの説明文字列があるので、正則で削除し、base 64復号してピクチャのファイルに保存しなければならない.そして住所に戻ればいい

以下に説明します.
これも画像をbase 64に変換して転送しますが、個人的にはjsで画像の大きさを変えることはお勧めしません.カットズームかPHPですることをお勧めします.

this.maxWidth = options.maxWidth || 800; 
this.maxHeight = options.maxHeight || 600; 
this.maxSize = options.maxSize || 3 * 1024 * 1024; 
this.input = options.input; 
this.mime = {'png': 'image/png', 'jpg': 'image/jpeg', 'jpeg': 'image/jpeg', 'bmp': 'image/bmp'};

この部分はアップロードするピクチャーの配置に対してで、理解することができるべきで、自分で直すことができます

$.ajax({ 
url:"{:U('upload')}", 
data:{str:base64,type:this.fileType}, 
type:'post', 
dataType:'json', 
success:function(i){ 
alert(i.info); 
}

テキストリンク:http://a3147972.blog.51cto.com/2366547/1554698