我需要上传图片,以下是HTML代码
<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>
以下是JS代码
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);
现在我有一个保存按钮,点击它时会调用以下功能
$('#saveButton').click(function(){
alert('savebutton');
var testjson=ko.toJSON(viewModel.doctor);
console.log(testjson);
});
问题是我没有在json中获取imagepath,imgsrc和imgfile。
这是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"}]}
有人可以指出我正在做的错误吗?
更新
以下是文件的自定义绑定
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);
}
}
}
};
答案 0 :(得分:1)
我的猜测是,您用来初始化data
的{{1}}参数不包含Doctor
属性。因此,您需要在imgFile
上创建一个观察点 - 并且不会以JSON格式显示。
将undefined
作业更改为:
imgFile
此外,this.imgFile = ko.observable(data['imgFile'] || '');
和imgSrc
两者从imgPath
获取数据 - 是复制/粘贴错误吗?