上传图片时如何获取图片路径

Question

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);
            }
        }
    }
};

Answer 1

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?