JS的File对象

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

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