Ich brauche die Bildgröße in Kilobyte und die Dimension (Höhe, Breite) überprüfen Wie kann ich die Größe des in Bytes bekommen? „Max Dateigröße erreicht“ Fehlermeldung angezeigt werden soll. Ich kann nicht herausfinden, wie nach dem Drag & Drop-Bild-Upload zu überprüfen.
$('#fileinput').bind('change', function() {
alert('This file size is: ' + this.files[0].size/1024/1024 + MB);
});
$(function(){
var viewModel = {};
viewModel.fileData = ko.observable({
dataURL: ko.observable(),
// base64String: ko.observable(),
});
viewModel.multiFileData = ko.observable({
dataURLArray: ko.observableArray(),
});
viewModel.onClear = function(fileData){
if(confirm('Are you sure?')){
fileData.clear && fileData.clear();
}
};
viewModel.debug = function(){
window.viewModel = viewModel;
console.log(ko.toJSON(viewModel));
debugger;
};
ko.applyBindings(viewModel);
});
<script src=https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js></script><link href=https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css rel=stylesheet/>
<link href=https://rawgit.com/adrotec/knockout-file-bindings/master/knockout-file-bindings.css rel=stylesheet/>
<script src=https://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js></script>
<script src=https://rawgit.com/adrotec/knockout-file-bindings/master/knockout-file-bindings.js></script>
<div class=well data-bind=fileDrag: fileData>
<div class=form-group row>
<div class=col-md-6>
<img style=height: 125px; class=img-rounded thumb data-bind=attr: { src: fileData().dataURL }, visible: fileData().dataURL>
<div data-bind=ifnot: fileData().dataURL>
<label class=drag-label> Drag file here</label>
</div>
</div>
<div class=col-md-6>
<input type=file id=fileinput data-bind=fileInput: fileData, customFileInput: {
buttonClass: 'btn btn-success',
fileNameClass: 'disabled form-control',
onClear: onClear,
} accept=image/*>
</div>
</div>
</div>