Θα πρέπει να ελέγξετε το μέγεθος της εικόνας σε kilobyte και τη διάσταση (ύψος, πλάτος) Πώς μπορώ να πάρω το μέγεθος του σε bytes; θα πρέπει να εμφανίζεται «Μέγιστο μέγεθος αρχείου φτάσει» μήνυμα λάθους. Δεν μπορώ να καταλάβω πώς να ελέγξει μετά Drag and Drop μεταφόρτωσης της εικόνας.
$('#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>