I play with the HTML 5 API and still have created a nice little image preview: 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>
Now my next goal is to read file properties such as image sizes. I can not find this information in any
event.dataTransfer.files [0]
and in the FileReader () event
So my question is: is it possible to read any of these properties? It seems that I did not find useful information.
Thanks a lot!
source share