码迷,mamicode.com
首页 > Web开发 > 详细

XMLHttpRequest 2.0与FileReader接口的方法

时间:2016-08-05 14:01:39      阅读:125      评论:0      收藏:0      [点我收藏+]

标签:

有:

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
*/一个上传马上展示图片的插件

XMLHttpRequest 2.0与FileReader接口的方法

标签:

原文地址:http://www.cnblogs.com/chenjinxinlove/p/5740865.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!