我正在尝试寻找一个使用 asp.net mvc3 和 knockout.js 进行多个文件上传的良好综合示例。我环顾四周,但没有从头到尾显示解决方案!这些示例显示了 knockout 绑定(bind)需要什么,但没有显示如何读取“ Controller ”中的文件。目标是将文件上传并保存到数据库。保存到 AWS S3 存储的示例是一个优点。请帮忙。
ko 绑定(bind):
<input type="file" data-bind="value: fileToUpload, fileUpload: fileToUpload, url : 'Client/Upload' " />
ko.bindingHandlers.fileUpload = {
update: function (element, valueAccessor, allBindingsAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor())
if (element.files.length && value) {
var file = element.files[0];
var url = allBindingsAccessor().url
xhr = new XMLHttpRequest();
xhr.open("post", url, true);
xhr.setRequestHeader("Content-Type", "image/jpeg");
xhr.setRequestHeader("X-File-Name", file.name);
xhr.setRequestHeader("X-File-Size", file.size);
xhr.setRequestHeader("X-File-Type", file.type);
console.log("sending")
// Send the file (doh)
xhr.send(file);
}
}
}
[HttpPost]
public ActionResult Upload()
{
//Not sure what to do here.
}
还需要进行多个文件上传吗?不确定如何设置 View 模型。
最佳答案
在javascript方面,我建议使用fineuploader http://fineuploader.com/ 。您可以创建自定义绑定(bind)来使用响应更新 View 模型。
<div data-bind="fileupload: viewModel.fileName"></div>
ko.bindingHandlers.fileUpload = {
init: function (element, valueAccessor) {
var $element = $(element);
var fileNameVal = valueAccessor;
var uploader = new qq.FineUploader({
element: $element[0],
request: {
endpoint: 'server/your_upload_service'
},
multiple: true,
validation: {
allowedExtensions: ['jpeg', 'jpg', 'txt']
},
callbacks: {
onComplete: function(id, fileName, responseJSON) {
if (responseJSON.success) {
// update your value
valueAccessor(fileName)
//may need to change this if you pass a reference back
// in your responseJSON such as an s3 key
}
}
}
});
}
};
对于服务器端,我不熟悉 ASP.net,但您应该能够与端点上的请求数据进行交互,并提取包含图像数据的多部分编码表单部分。
可能想看看这些答案
MVC 3 file upload and model binding
另请注意,fineuploader 使用 key “qqfile”发送请求中的文件
关于asp.net-mvc-3 - 寻找使用 asp.net mvc3 和 knockout.js 上传文件的好例子,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15204796/