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属性中。
| 方法名 | 参数 | 描述 |
|---|---|---|
| readAsBinaryString | file | 将文件读取为二进制编码 |
| readAsText | file,[encoding] | 将文件读取为文本 |
| readAsDataURL | file | 将文件读取为DataURL |
| abort | (none) | 终端读取操作 |
2、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 === || _this.nodeType === || !_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){}/;
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[].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[];
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
*/一个上传马上展示图片的插件