JS的File对象


这个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加载到画布上,这其实很好理解,不必要读取文件了,地址都有了,自己放上去即可了。


本文是对头像上传截取功能的部分小结

你可能感兴趣的:(Web前端设计)