如何在移动web上上传文件..

最新推荐文章于 2021-03-19 00:18:31 发布

weixin_34200628

最新推荐文章于 2021-03-19 00:18:31 发布

阅读量165

点赞数

文章标签： python 移动开发

原文链接：https://my.oschina.net/u/1260221/blog/657797

版权

2019独角兽企业重金招聘Python工程师标准>>>

xmlhttprequest2.0 可以支持文件上传.这东东很方便,但是在实际使用中碰到了一些问题.这里记录下.

正常情况下我们是这样生成2进制文件的.

//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 Blob([new Uint8Array(array)], {type: 'image/jpeg'});
}

但是在android手机上可能会由于没有blob对象导致无法生成blob.怎么办捏.可以使用以下代码:

function newBlob(data, datatype){
    var out;
    try {
        out = new Blob([data], {type: datatype});
        //一切正常,直接使用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 {
            //没救了,放弃治疗.
        }
    }
    return out;
}

ok.现在文件已经ready了.

我们创建一个formadata

 var file = dataURLtoBlob(img);
    fd.append('img',file);

愉快的上传….然后…然后…没有然后了…抓包看下.

------WebKitFormBoundarysToAVAYMLPFfJF96
 Content-Disposition: form-data; name="img"; filename="blob"
 Content-Type: application/octet-stream ------WebKitFormBoundarysToAVAYMLPFfJF96--

文件的内容呢…

好吧..既然没法愉快用formdata..那么就自己动手生成一个post的包体吧…下面是相关的代码..

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('--' + 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('--' + boundary + '--/r/n');

            data = new XBlob(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);
        }
    };
}

最后完整的代码长这样

function newBlob(data, datatype){
    var out;
    try {
        out = new Blob([data], {type: datatype});
    }
    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);
        }
        else if (e.name == "InvalidStateError") {
            out = new Blob([data], {type: datatype});
        }
        else {
        }
    }
    return out;
}

// 判断是否需要blobbuilder
var needsFormDataShim = (function () {
        var bCheck = ~navigator.userAgent.indexOf('Android')
                        && ~navigator.vendor.indexOf('Google')
                        && !~navigator.userAgent.indexOf('Chrome');

        return bCheck && navigator.userAgent.match(/AppleWebKit\/(\d+)/).pop() <= 534;
    })(),
    blobConstruct = !!(function () {
        try { return new Blob(); } catch (e) {}
    })(),
    XBlob = blobConstruct ? window.Blob : function (parts, opts) {
        var bb = new (window.BlobBuilder || window.WebKitBlobBuilder || window.MSBlobBuilder);
        parts.forEach(function (p) {
            bb.append(p);
        });

        return bb.getBlob(opts ? opts.type : undefined);
};

function FormDataShim () {
    // Store a reference to this
    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('--' + 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');
    };

    // Override XHR send()
    XMLHttpRequest.prototype.send = function (val) {
        var fr,
            data,
            oXHR = this;

        if (val === o) {
            //注意不能漏最后的\r\n ,否则有可能服务器解析不到参数.
            parts.push('--' + boundary + '--\r\n');
            data = new XBlob(parts);
            fr = new FileReader();
            fr.onload = function () { oldSend.call(oXHR, fr.result); };
            fr.onerror = function (err) { throw err; };
            fr.readAsArrayBuffer(data);

            this.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary);
            XMLHttpRequest.prototype.send = oldSend;
        }
        else {
            oldSend.call(this, val);
        }
    };
}

//把图片转成formdata 可以使用的数据...
//这里要把\s替换掉..要不然atob的时候会出错....
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 newBlob(new Uint8Array(array), 'image/jpeg');
}

function uploadFile(img){
    var fd = needsFormDataShim ? new FormDataShim() : new FormData();
    var file = dataURLtoBlob(img);
    fd.append('img',file);

    var prog = function(e){
        /*你的逻辑*/
    }
    var load = function(e){
        /*你的逻辑*/
    }
    var error = function(e){
        /*你的逻辑*/
    }
    var abort = function(e){
        /*你的逻辑*/
    }

    var xhr = new XMLHttpRequest();
        xhr.upload.addEventListener('progress',prog,false);
        xhr.addEventListener('load',load,false);
        xhr.addEventListener('error',error,false);
        xhr.addEventListener('abort',abort,false);

    xhr.onreadystatechange = function(){
        /*你的逻辑*/
    }
    xhr.open('POST','/upload',true);
    xhr.send(fd);
}

我的代码

document.addEventListener('DOMContentLoaded', init, false);

        function init() {
            var u = new UploadPic();
            u.init({
                input: document.querySelector('#selectFile')
            });
        }

        function UploadPic() {
            this.sw = 0;
            this.sh = 0;
            this.tw = 0;
            this.th = 0;
            this.scale = 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.input = options.input;
            this.mime = {'png': 'image/png', 'jpg': 'image/jpeg', 'jpeg': 'image/jpeg', 'bmp': 'image/bmp'};
            this.callback = options.callback || function () {
                };
            this._addEvent();
        };

        UploadPic.prototype._addEvent = function () {
            var _this = this;

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

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

        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);
        };

        UploadPic.prototype._readImage = function (file) {
            var _this = this;
            this._getURI(file, this.callback);
        };

        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;
        };

转载：

http://stackoverflow.com/questions/15639070/empty-files-uploaded-in-android-native-browser/28809955#28809955

http://hao.jser.com/archive/7247/

http://www.haomou.net/2016/01/14/2016_android_blob/

http://www.oschina.net/question/2502182_2139420

转载于:https://my.oschina.net/u/1260221/blog/657797