4

私は HTML 5 ファイル 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