H5图片上传

js 移动端图片上传

针对网上移动端图片上传代码根据实际业务需求修改，可参考图片上传
移动端的图片上传个人感觉比PC端要简单（PC有万恶的IE），移动端主要的问题是一些Android机不兼容 不支持formdata上传blob，需要给这部分Android机打上补丁，但是从网上Duang下来的源码普遍都是一个模子出来的不知道大家是不是都能正常上传，反正我测试时的不行。于是和后台各种联调，在原来的代码上稍微修改了下。

/**
* formdata 补丁, 给不支持formdata上传blob的android机打补丁
* @constructor
*/
function formDataShim(){
        var o = this,
            parts = [],// Data to be sent
            boundary = Array(5).join('-') + (+new Date() * (1e16*Math.random())).toString(32),
            oldSend = XMLHttpRequest.prototype.send;

        this.append = function (name, value, filename) {
            parts.push('\r\n--' + boundary + '\r\nContent-Disposition: form-data; name="' + name + '"');

            if (value instanceof Blob) {
                parts.push('; filename="'+ (filename || 'blob') +'"\r\nContent-Type: ' + value.type + '\r\n\r\n');
                parts.push(value);
            } else {
                parts.push('\r\n\r\n' + value);
            }
            parts.push('\r\n');
        };

        //把xhr的send方法重写一下.
        XMLHttpRequest.prototype.send = function (val) {
            var fr,
                data,
                oXHR = this;
            if (val === o) {
                // 最后加一下boundary..注意这里一定要在最后和前面加\r\n..否则服务器有可能会解析参数失败..
                parts.push("\r\n--"+boundary+"--\r\n");
                data = getBlob(parts);
                fr = new FileReader();

                fr.onload = function () {oldSend.call(oXHR, fr.result); };
                fr.onerror = function (err) { throw err; };
                fr.readAsArrayBuffer(data);
                // 设置content-type
                this.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary);
                XMLHttpRequest.prototype.send = oldSend;
            }
            else {
                oldSend.call(this, val);
            }
        };
    };
    /**
     * 获取formdata
     */
    function getFormData(){
        var isNeedShim = ~navigator.userAgent.indexOf('Android') &&
            ~navigator.vendor.indexOf('Google') &&
            !~navigator.userAgent.indexOf('Chrome') &&
            navigator.userAgent.match(/AppleWebKit\/(\d+)/).pop() <= 534;
        return isNeedShim ? new formDataShim() : new window.FormData();
    };
    /**
     * 获取blob对象的兼容性写法
     * @param data  dataURLtoBlob处理过后的数据
     * @param datatype
     * @returns {*}
     */
    function getBlob(data, datatype){
        var out;
        try {
            if(datatype){//带datatype参数的是正常机型获取blob
                out = new Blob([data], {type: datatype});
            }else {//不带datatype参数是打补丁机型获取blob 
                out = new Blob(data);
            }
            //一切正常,直接使用blob.
        } catch (e) {
            window.BlobBuilder = window.BlobBuilder ||
                    window.WebKitBlobBuilder ||
                    window.MozBlobBuilder ||
                    window.MSBlobBuilder;

            if (e.name == 'TypeError' && window.BlobBuilder) {
                var bb = new BlobBuilder();
                bb.append(data.buffer);
                out = bb.getBlob(datatype);
                //还可以抢救一下..使用blobbuilder来生成文件..
            } else {
                alert('不支持文件上传机型！')
            }
        }
        return out;
    };
    /**
     *@param(data) 图片base64数据
     */
    function dataURLtoBlob(data) {
        var tmp = data.split(',');
        tmp[1] = tmp[1].replace(/\s/g,'');
        var binary = atob(tmp[1]);
        var array = [];
        for(var i = 0; i < binary.length; i++) {
            array.push(binary.charCodeAt(i));
        }
        return new getBlob(new Uint8Array(array), 'image/jpeg');
    };
    /**
    *xhr请求
    *@param(basestr) 图片database64
    *@param(url) 上传地址
    */
    function upload(basestr,url){
        var xhr = new XMLHttpRequest();
        var formdata = getFormData();
        var blob = dataURLtoBlob(basestr);
        formdata.append('file', blob);
        xhr.open('post', url);
        var timeout=30000;
        var timer = setTimeout(function(){
            timeout = 0;
            xhr.abort();//请求中止
        },timeout);
        xhr.onreadystatechange = function() {
            if(!timeout){
                // 超时处理
            }
            if(xhr.readyState == 4 && xhr.status == 200) {
                clearTimeout(timer);//取消等待的超时
                var imagedata = JSON.parse(xhr.responseText);
                // 成功处理
            }
            if(xhr.readyState == 4 && xhr.status == 404){
                clearTimeout(timer);//取消等待的超时
                // 接口404
            }
            if(xhr.readyState == 4 && xhr.status == 500){
                clearTimeout(timer);//取消等待的超时
                // 接口500
            }
        };
        xhr.send(formdata);
    }

以上就是图片上传当然这个是没有做压缩处理的调用方法 upload（‘图片database64’，‘上传地址’）