[英]file upload using knockout js
File upload not working using knockout js. 文件上传无法使用knockout js。 I have tried with below code but not working. 我试过下面的代码,但没有工作。 Please mention where I am doing wrong. 请提一下我做错的地方。
This is my file control and button. 这是我的文件控件和按钮。 I am unable to send the selected file from the client side to the server. 我无法将所选文件从客户端发送到服务器。 Please suggest what is the best approach for this. 请建议最好的方法是什么。
<input id="files" name="files" type="file" class="input-file" data-bind="file: FileProperties.FileName"/>
<button data-bind="click : Upload">Upload</button>
<script type="text/javascript">
ko.bindingHandlers.file = {
init: function (element, valueAccessor) {
alert('init');
$(element).change(function () {
var file = this.files[0];
if (ko.isObservable(valueAccessor())) {
valueAccessor()(file);
}
});
}
</script>
I came up with this solution for my current project. 我为我当前的项目提出了这个解决方案。
<img class="myImage" data-bind="attr: {src: $root.photoUrl() || 'images/tempImage.png'}"/>
<input data-bind="event: {change: $root.fileUpload}" type="file" accept="image/*" class="fileChooser"/>
<script>
var myController = function()
{
var self = this;
this.photoUrl = ko.observable();
this.fileUpload = function(data, e)
{
var file = e.target.files[0];
var reader = new FileReader();
reader.onloadend = function (onloadend_e)
{
var result = reader.result; // Here is your base 64 encoded file. Do with it what you want.
self.photoUrl(result);
};
if(file)
{
reader.readAsDataURL(file);
}
};
};
</script>
Seems like you need a custom knockout binding for file uploading. 好像你需要一个自定义的敲除绑定文件上传。 There are various api/libs available that handles all the error cases with additional features. 有各种api / lib可用于处理所有具有附加功能的错误情况。 Try this: https://github.com/TooManyBees/knockoutjs-file-binding 试试这个: https : //github.com/TooManyBees/knockoutjs-file-binding
<input type="file" id="FileName" style="width:180px" data-bind="value:addModel.InputFileName" />
function ()
{
var files = $("#FileName").get(0).files;
var data = new FormData();
for (var x = 0; x < files.length; x++) {
data.append("file" + x, files[x]);
}
$.ajax({
type: "POST",
url: '/api/Controller' + '/?id=' + id ),
contentType: false,
processData: false,
data: data,
success: function (result) {},
error: function (xhr, status, p3, p4) {}
});
}
You can do the following: 您可以执行以下操作:
View : 查看:
<input type="file" id="files" name="files[]" multiple data-bind=" event:{change: $root.fileSelect}" />
<output id="list"></output>
<ul>
<!-- ko foreach: files-->
<li>
<span data-bind ="text: name"></span>: <img class="thumb" data-bind = "attr: {'src': src, 'title': name}"/>
</li>
<!-- /ko -->
</ul>
JS: JS:
var ViewModel = function() {
var self = this;
self.files= ko.observableArray([]);
self.fileSelect= function (elemet,event) {
var files = event.target.files;// FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
self.files.push(new FileModel(escape(theFile.name),e.target.result));
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
};
};
var FileModel= function (name, src) {
var self = this;
this.name = name;
this.src= src ;
};
ko.applyBindings(new ViewModel());
You can find the demo in the link: http://jsfiddle.net/fPWFd/436/ 您可以在链接中找到该演示: http : //jsfiddle.net/fPWFd/436/
For Magento 2 below code is useful to display uploaded image by knockout js. 对于Magento 2,下面的代码对于通过knockout js显示上传的图像非常有用。
In html file 在html文件中
<img class="myImage" data-bind="attr: {src: photoUrl() || 'images/tempImage.png'}"/>
<input data-bind="event: {change: fileUpload}" type="file" accept="image/*" class="fileChooser"/>
Js file need to code as below Js文件需要编码如下
define(['ko', 'uiComponent', 'jquery'], function (ko, Component, $) {
'use strict';
var photoUrl;
return Component.extend({
photoUrl : ko.observable(),
fileUpload: function(data, e)
{
var file = e.target.files[0];
var reader = new FileReader();
reader.onloadend = function (onloadend_e)
{
var result = reader.result; // Here is your base 64 encoded file. Do with it what you want.
self.photoUrl(result);
};
if(file)
{
reader.readAsDataURL(file);
}
},
});
});
}
above code is working fine with my project. 上面的代码与我的项目工作正常。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.