私は 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() イベントでも
だから私の質問は: これらのプロパティのいずれかを読み取ることは可能ですか? その件については、有益な情報が見つからないようです。
どうもありがとう!