I have a requirement to upload an image and following is the HTML code
<div class="fileupload fileupload-new" data-provides="fileupload" align="center">
<div data-bind="if: doctor.imgSrc">
<div class="fileupload-new thumbnail" style="width: 150px; height: 150px;"><img data-bind="attr: { src: doctor.imgSrc }"/></div>
</div>
<div data-bind="ifnot: doctor.imgSrc">
<div data-bind="if: doctor.imagePath">
<div class="fileupload-new thumbnail" style="width: 150px; height: 150px;"><img data-bind="attr: { src: doctor.imagePath }"/></div>
</div>
<div data-bind="ifnot: doctor.imagePath">
<div class="fileupload-new thumbnail" style="width: 150px; height: 150px;"><img src="${pageContext.request.contextPath}/resources/ui_resources/img/profile_pic.png" /></div>
</div>
</div>
<div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 150px; max-height: 150px; line-height: 20px;"></div>
<div>
<span class="btn btn-file"><span class="fileupload-new">Select image</span><span class="fileupload-exists">Change</span><input type="file" data-bind=" file: doctor.imgFile, fileObjectURL: doctor.imgSrc"/></span>
<a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
</div>
</div>
and following is the JS codes
var Doctor = (function () {
function Doctor(data) {
this.id = ko.observable('');
this.name = ko.observable('');
this.degree = ko.observable('');
this.gender = ko.observable('');
this.username = ko.observable('');
this.password = ko.observable('');
this.email = ko.observable('');
this.mobile = ko.observable('');
this.imgFile = ko.observable('');
this.imgSrc = ko.observable('');
this.imagePath = ko.observable('');
this.userid = ko.observable('');
this.department = ko.observable('');
this.schedules = ko.observableArray([]);
if (data != null) {
this.id = ko.observable(data['id']);
this.name = ko.observable(data['name']);
this.degree = ko.observable(data['degree']);
this.gender = ko.observable(data['gender']);
this.username = ko.observable(data['username']);
this.password = ko.observable(data['password']);
this.email = ko.observable(data['email']);
this.mobile = ko.observable(data['mobile']);
this.imgFile = ko.observable(data['imgFile']);
this.imgSrc = ko.observable(data['imagePath']);
this.imagePath = ko.observable(data['imagePath']);
this.userid = ko.observable(data['userid']);
this.department = ko.observable(data['department']);
}
}
return Doctor;
})();
var doc = new Doctor(doctor);
function vm() {
var self = this;
self.doctor = doc;
}
var viewModel = new vm();
ko.applyBindings(viewModel);
Now I have a save button and when its clicked it calls the following function
$('#saveButton').click(function(){
alert('savebutton');
var testjson=ko.toJSON(viewModel.doctor);
console.log(testjson);
});
The problem with it is I am not getting the imagepath,imgsrc and imgfile in the json.
This is the json
{"id":2,"name":"doc2","degree":"DA(Anaesthesia)","gender":"Female","username":"doc","password":"doc","email":"doc1@doc1.com","mobile":"12345678901","imgSrc":"imagePathValue","imagePath":"imagePathValue","userid":11,"department":"Bio-Chemistry","schedules":[{"id":"0","day":"Monday","fromtime":"17:21","totime":"18:21","hospitalId":5,"hospital":"Yashoda"},{"id":"1","day":"Tuesday","fromtime":"05:23","totime":"12:18","hospitalId":5,"hospital":"Yashoda"},{"id":"2","day":"Wednesday","fromtime":"11:23","totime":"12:23","hospitalId":5,"hospital":"Yashoda"},{"id":"3","day":"Thursday","fromtime":"17:27","totime":"18:27","hospitalId":46,"hospital":"Sai Bhavani"},{"id":"4","day":"Friday","fromtime":"10:30","totime":"12:30","hospitalId":46,"hospital":"Sai Bhavani"}]}
Can anybody please point out the mistake I am doing?
Update
Following is the custom binding for file
var windowURL = window.URL || window.webkitURL;
ko.bindingHandlers.file = {
init: function(element, valueAccessor) {
$(element).change(function() {
var file = this.files[0];
if (ko.isObservable(valueAccessor())) {
valueAccessor()(file);
formdata.append("image",file);
}
});
},
update: function(element, valueAccessor, allBindingsAccessor) {
var file = ko.utils.unwrapObservable(valueAccessor());
var bindings = allBindingsAccessor();
if (bindings.fileObjectURL && ko.isObservable(bindings.fileObjectURL)) {
var oldUrl = bindings.fileObjectURL();
if (oldUrl) {
windowURL.revokeObjectURL(oldUrl);
}
bindings.fileObjectURL(file && windowURL.createObjectURL(file));
}
if (bindings.fileBinaryData && ko.isObservable(bindings.fileBinaryData)) {
if (!file) {
bindings.fileBinaryData(null);
} else {
var reader = new FileReader();
reader.onload = function(e) {
bindings.fileBinaryData(e.target.result);
};
reader.readAsArrayBuffer(file);
}
}
}
};
My guess is that the data
parameter you're using to initialize the Doctor
does not contain an imgFile
property. Therefore, you're creating an observable on undefined
-- and that won't show up in JSON.
Change the imgFile
assignment to:
this.imgFile = ko.observable(data['imgFile'] || '');
Also, imgSrc
and imgPath
both grab their data from data['imagePath']
-- is that a copy/paste error?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.