我正在尝试用asp.net mvc3&amp ;;来寻找一个很好的全面的多文件上传示例。 knockout.js。我一直在环顾四周,但从头到尾都没有显示出解决方案!这些示例显示了敲除绑定需要的内容,但没有显示如何读取“Controller”中的文件。目标是上传并将文件保存到db。保存到AWS S3存储的示例是一个优点。请帮忙。
ko binding:
<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.
}
还需要做多个文件上传吗?不确定如何设置viewmodels。
答案 0 :(得分:2)
在javascript方面,我建议使用fineuploader http://fineuploader.com/。您可以创建自定义绑定以使用响应更新viewmodel。
<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使用密钥“qqfile”
发送请求中的文件