4

我正在玩弄 HTML 5 File API，到目前为止创建了一个不错的小图像预览：http: //jsfiddle.net/ZZNn9/3/

<div id="dropbox" data-bind="style: {background: mapBackground}, event:dragenter:imageDropboxDragEnter, dragover:imageDropboxDragOver, drop: imageDropboxDrop}" style="width:400px;height:400px;background-color:#ccc"></div>
<p data-bind="text:status"></p>
<script>
var viewModel;

function ViewModel()
{
    var self = this;
    self.status = ko.observable();
    self.mapBackground = ko.observable();

    self.imageDropboxDragEnter = function(data, event)
    {
        self.status('enter');
    }
    self.imageDropboxDragOver = function(data, event)
    {
        self.status('over');
    }
    self.imageDropboxDrop = function(data, event)
    {
        event.stopPropagation();
        self.status('drop');
        console.log(event.dataTransfer.files[0]);

        var fileReader = new FileReader();
        fileReader.onload = function(event)
        {
            console.log(event);
            var mapImage = event.target.result;
            self.mapBackground('url(' + mapImage + ') no-repeat center');
        }
        fileReader.readAsDataURL(event.dataTransfer.files[0]);
    }
}

viewModel = new ViewModel();
ko.applyBindings(viewModel);
</script>

现在我的下一个目标是读取文件属性，例如图像的尺寸。我在任何一个中都找不到这些信息

event.dataTransfer.files[0]

也不在 FileReader() 事件中

所以我的问题是：是否可以读取这些属性中的任何一个？我似乎没有找到任何关于这件事的有用信息。

非常感谢！

4

0 回答 0