XMLHttpRequest 2.0与FileReader接口的方法

jsonpd的实现：

    var jsonp = function (options) {
        var url = options.url,
                params = options.params || {},
                callbackKey = options.callbackKey || 'callback',
                callback = options.callback;
        var script = document.createElement('script');
        var arr = [];
        for (var key in params) {
            arr.push(key + '=' + params[key]);

        }
        params = arr.join('&');
        script.src = encodeURI(url + '?' + callbackKey + "=callback&"+params );
        document.body.appendChild(script)
        window.callback = callback;

    }
    
    jsonp({
        url:'http://127.0.0.1:3000',
        callbackKey: 'callback',
        callback:function (data) {
            console.log(data)
        },
        params: {
            key: 'excited',
        },
    })

　　

有：

DOMString、Document、FormData、Blob、File、ArrayBuffer

看张大神的博客吧。http://www.zhangxinxu.com/wordpress/2013/10/understand-domstring-document-formdata-blob-file-arraybuffer/

 

其中的FileReader接口做一些准备：

1、FileReader接口的方法

FileReader接口有4个方法，其中3个用来读取文件，另一个用来中断读取。无论读取成功或失败，方法并不会返回读取结果，这一结果存储在result属性中。

 

FileReader接口的方法

方法名	参数	描述
readAsBinaryString	file	将文件读取为二进制编码
readAsText	file,[encoding]	将文件读取为文本
readAsDataURL	file	将文件读取为DataURL
abort	(none)	终端读取操作

 

 

2、FileReader接口事件

FileReader接口包含了一套完整的事件模型，用于捕获读取文件时的状态。

 

 

FileReader接口的事件

事件	描述
onabort	中断
onerror	出错
onloadstart	开始
onprogress	正在读取
onload	成功读取
onloadend	读取完成，无论成功失败

var UpPreviewImg = function (options) {
    this.upPreview(options)
}

UpPreviewImg.prototype = {
    isIE :function () { //是否是IE
        return !!window.ActiveXObject;
    },
    isIE6 :function () {//是否是IE6
        return isIE() && !window.XMLHttpRequest;
    },
    isIE7 :function () {//是否是IE7
        return isIE() && !isIE6() && !isIE8()
    },
    isIE8 :function () {
        return isIE() && !!document.documentMode;
    },
    setCss : function (_this,cssOption) {
        if(!_this||_this.nodeType ===3 || _this.nodeType === 8 || !_this.style){
            return;
        }
        for(var cs in cssOption){
            _this.style[cs] = cssOption[cs];
        }
        return _this;
    },

    upPreview:function (options) {
    var _e = options.e,
        preloadImg = null;
    _e.onchange = function () {
        var _v = this.value,
            _body = document.body;
        picReg = /(.JPEG|.jpeg|.JPG|.jpg|.GIF|.gif|.BMP|.bmp|.PNG|.png){1}/;

        if(!picReg.test(_v)){
            alert("请选择正确的图片格式");
            return false;
        }
        if(typeof FileReader == 'undefined') {
            if (this.file) {
                var _img = document.createElement("img");
                _img.setAttribute("src", this.file.files[0].getAsDataURL());
                options.preview.appendChild(_img);
            }
            else if (this.isIE6()) {
                var _img = document.createElement("img");
                _img.setAttribute("src", _v);
                options.preview.appendChild(_img);
            }
            else{
                _v = _v.replace(/[('"%]/g,function (str) {
                    return escape(escape(str));
                });
                this.setCss(options.preview,{
                    "filter":"progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\'"+_v+"\')","display":"block"
                });
            }
        }
        else{
            var reader = new FileReader(),
                _file = this.files[0];
            reader.onload = (function (file) {
                return function () {
                    var _img = document.createElement("img");
                    _img.setAttribute("src",this.result);
                    options.preview.appendChild(_img);
                };
            })(_file);

            reader.onerror = function () {
                alert("文件读取数据出错");
            }

            reader.readAsDataURL(_file);

        }
    }


}
}


module.exports = upPreviewImg;

*
* e 长传的图片
* preview 展示的div
* @param options
*/一个上传马上展示图片的插件