Question

我正在使用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（）事件中

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

非常感谢！

是否可以使用HTML 5 File API读取文件/图像属性

0 个答案: