JS的File对象
2014-05-08 13:44
260 查看
<input type="file" id="input" size="10" style="visibility:hidden;" onchange="selectImage(this.files)" />
这个input控件的onchange事件中可以得到fileList对象,里面可以有多个file,然后利用下面的方法
ImageCropper.prototype.loadImage = function(file)
{
if(!this.isAvaiable() || !this.isImage(file)) return;
var reader = new FileReader();
var me = this;
reader.readAsDataURL(file);
reader.onload = function(evt)
{
if(!me.image) me.image = new Image();
me.image.onload = function(e){me._init()};
me.image.src = evt.target.result;
}
}
主要是通过FileReader读取文件,然后显示出来图片,这里readAsDataURL应该是没有返回值的,依靠相关事件捕捉数据。
另外据说某某的拖拽事件中也可以得到File对象,具体什么样的拖拽事件暂时还不清楚。
但是怎么才能自己new 一个file呢,我希望new 一个file,设置相关属性,发现不行,想想也是,
若果真能自己随便new的话,那么用户机器上的文件不就不安全了吗?
ImageCropper.prototype.loadImage2 = function(url)
{
var me = this;
if(!me.image) me.image = new Image();
me.image.onload = function(e){me._init()};
me.image.src = url;
}
这是我扩展的一个方法,通过图片url加载到画布上,这其实很好理解,不必要读取文件了,地址都有了,自己放上去即可了。
本文是对头像上传截取功能的部分小结
这个input控件的onchange事件中可以得到fileList对象,里面可以有多个file,然后利用下面的方法
ImageCropper.prototype.loadImage = function(file)
{
if(!this.isAvaiable() || !this.isImage(file)) return;
var reader = new FileReader();
var me = this;
reader.readAsDataURL(file);
reader.onload = function(evt)
{
if(!me.image) me.image = new Image();
me.image.onload = function(e){me._init()};
me.image.src = evt.target.result;
}
}
主要是通过FileReader读取文件,然后显示出来图片,这里readAsDataURL应该是没有返回值的,依靠相关事件捕捉数据。
另外据说某某的拖拽事件中也可以得到File对象,具体什么样的拖拽事件暂时还不清楚。
但是怎么才能自己new 一个file呢,我希望new 一个file,设置相关属性,发现不行,想想也是,
若果真能自己随便new的话,那么用户机器上的文件不就不安全了吗?
ImageCropper.prototype.loadImage2 = function(url)
{
var me = this;
if(!me.image) me.image = new Image();
me.image.onload = function(e){me._init()};
me.image.src = url;
}
这是我扩展的一个方法,通过图片url加载到画布上,这其实很好理解,不必要读取文件了,地址都有了,自己放上去即可了。
本文是对头像上传截取功能的部分小结
相关文章推荐
- js用FileSystemObject 对象实现文件控制
- js中FileReader对象入门
- swfupload js中 file 对象的属性
- js获取file文件对象大小
- 原生js FileReader对象实现图片上传本地预览效果
- js用FileSystemObject 对象实现文件控制
- JS进阶篇--IE浏览器的ActiveXObject对象以及FileSystemobject的应用扩展(完成)
- js用FileSystemObject 对象实现文件控制
- js 根据已有File对象构造新的File对象
- js用FileSystemObject 对象实现文件控制
- js中FileReader对象入门-fileReader中的事件
- js用FileSystemObject 对象实现文件控制
- JS FileSystemObject 对象使用
- js用FileSystemObject 对象实现文件控制
- js用FileSystemObject 对象实现文件控制
- JS+HTML5 FileReader对象用法示例
- 对象不支持“handleError”属性或方法 ajaxfileupload.js
- JS实现拖动对象的代码
- js中json对象不规律key的遍历实现和json对象length属性的调用
- 在js中使用createElement创建HTML对象和元素