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属性中。
方法名 | 参数 | 描述 |
---|---|---|
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
*/一个上传马上展示图片的插件
XMLHttpRequest 2.0与FileReader接口的方法的更多相关文章
- 毕业论文中使用的技术—FileReader接口
用来把文件读入内存,并且读取文件中的数据. FileReader接口提供了一个异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据 FileReader接口的方法 方法名 参 ...
- HTML5学习之FileReader接口
http://blog.csdn.net/zk437092645/article/details/8745647 用来把文件读入内存,并且读取文件中的数据.FileReader接口提供了一个异步API ...
- Html5 js FileReader接口
用来把文件读入内存,并且读取文件中的数据.FileReader接口提供了一个异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据.到目前文职,只有FF3.6+和Chrome6 ...
- as3.0 interface接口使用方法
[转]as3.0 interface接口使用方法 AS在2.0的时候就支持接口了 接口能够让你的程序更具扩展性和灵活性,打个例如 比方你定义了一个方法 代码: public function aMet ...
- HTML5 FileReader接口学习笔记
1.FileReader概述 FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据. 其中F ...
- java中获取接口(方法)中的参数名字(eclipse设置编译参数)(java8 javac -parameters)
interface接口参数 jdk1.7及以前使用spring功能实现的: 注意: 1.该功能只能获取类的方法的参数名,不能获取接口的方法的参数名. public static void test() ...
- Spring自定义一个拦截器类SomeInterceptor,实现HandlerInterceptor接口及其方法的实例
利用Spring的拦截器可以在处理器Controller方法执行前和后增加逻辑代码,了解拦截器中preHandle.postHandle和afterCompletion方法执行时机. 自定义一个拦截器 ...
- Java6.0中Comparable接口与Comparator接口详解
Java6.0中Comparable接口与Comparator接口详解 说到现在,读者应该对Comparable接口有了大概的了解,但是为什么又要有一个Comparator接口呢?难道Java的开发者 ...
- Java基础学习笔记十二 类、抽象类、接口作为方法参数和返回值以及常用API
不同修饰符使用细节 常用来修饰类.方法.变量的修饰符 public 权限修饰符,公共访问, 类,方法,成员变量 protected 权限修饰符,受保护访问, 方法,成员变量 默认什么也不写 也是一种权 ...
随机推荐
- <s:iterator> 对list操作的一种方法
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAA6IAAAH3CAIAAAAuRnW9AAAgAElEQVR4nOzdf4gk1333+wLDDffhPp
- POJ 2417 Discrete Logging(离散对数-小步大步算法)
Description Given a prime P, 2 <= P < 231, an integer B, 2 <= B < P, and an integer N, 1 ...
- ArcGIS Engine中加载数据
ArcGIS Engine中加载数据 http://blog.csdn.net/gisstar/article/details/4206822 分类: AE开发积累2009-05-21 16:49 ...
- angular 解析html
方法1:写filter <div ng-bind-html="showContent | html" class="detail-content"> ...
- BaseAction的一般写法
package com.mi.action; import java.util.Map; import javax.servlet.http.HttpServletRequest; import ja ...
- 关于wxwidgets图形界面的关闭窗口的按钮无效的解决办法
这是使用wxsmith设计界面时的情况,如果用纯代码写的界面,关闭按钮就很奇怪地有效 道听途说,窗口的关闭是由一个方法控制着.大概是这样的: void PlainFrame::OnClose(wxCl ...
- 《C语言入门1.2.3—一个老鸟的C语言学习心得》—清华大学出版社炮制的又一本劣书及伪书
<C语言入门1.2.3—一个老鸟的C语言学习心得>—清华大学出版社炮制的又一本劣书及伪书 [薛非评] 区区15页,有80多个错误. 最严重的有: 通篇完全是C++代码,根本不是C语言代码. ...
- 对DotNet分布式应用搭建的考虑
设计前的考虑和准备工作 1 对业务需求的理解重要性远远胜于对技术架构的理解 2 架构包含技术架构和业务架构 3 没有万能和通用的架构,只有符合自身业务需求的架构 4 架构本身的复杂性要截至在架构设计阶 ...
- web负载均衡
在有些时候进行扩展是显而易见的,比如下载服务由于带宽不足而必须进行的扩展,但是,另一些时候,很多人一看到站点性能不尽如人意,就马上实施负载均衡等扩展手段,真的需要这样做吗?当然这个问题也只有他们自己能 ...
- Linux系统的中断、系统调用和调度概述【转】
转自:http://blog.csdn.net/yanlinwang/article/details/8169725 版权声明:本文为博主原创文章,未经博主允许不得转载. 最近学习Linux操作系统, ...