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