Jquery 如何使用knockout js上传图像并保存在数据库中？

嘿，我使用mvc3和敲除，并试图使用敲除绑定上传和保存上传的图像在数据库中。我能够浏览并获取图像，但无法获取如何保存该图像。 我的html视图是：

<div data-bind="foreach: { data: images, beforeRemove: beforeRemoveSlot }">
        <div>
            <input type="file" accept="image/*" data-bind="file: imageFile, fileObjectURL: imageObjectURL, fileBinaryData: imageBinary"/>
            <div data-bind="if: imageObjectURL">
                <img class="thumb" data-bind="attr: { src: imageObjectURL }"/>
            </div>
            <div>Size: <span data-bind="text: fileSize"></span>&nbsp;bytes</div>
        </div>
    </div>
        <input type="submit" value="Upload Picture" data-bind="click: upload" />

大小：字节

我的视图模型是：

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

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

var imageUploadModel = function () {
    var self = {};

    var slotModel = function () {
        var that = {};

        that.imageFile = ko.observable();
        that.imageObjectURL = ko.observable();
        that.imageBinary = ko.observable();

        that.fileSize = ko.computed(function () {
            var file = this.imageFile();
            return file ? file.size : 0;
        }, that);

        that.firstBytes = ko.computed(function () {
            if (that.imageBinary()) {
                var buf = new Uint8Array(that.imageBinary());
                var bytes = [];
                for (var i = 0; i < Math.min(10, buf.length); ++i) {
                    bytes.push(buf[i]);
                }
                return '[' + bytes.join(', ') + ']';
            } else {
                return '';
            }
        }, that);

        return that;
    };

    self.beforeRemoveSlot = function (element, index, data) {
        if (data.imageObjectURL()) {
            windowURL.revokeObjectURL(data.imageObjectURL());
        }
        $(element).remove();
    };

    self.images = ko.observableArray([slotModel()]);

    self.addSlot = function () {
        self.images.push(slotModel());
    };

    self.removeSlot = function (data) {
        self.images.remove(data);
    };

    return self;
} ();

imageUploadModel.upload = function () {

}

$(document).ready(function () {
    ko.applyBindings(imageUploadModel);
});

var windowURL=window.URL | | window.webkitURL；
ko.bindingHandlers.file={
init：函数（元素、值访问器）{
$（元素）.更改（函数（）{
var file=this.files[0]；
if（ko.isObservable（valueAccessor（）））{
valueAccessor（）（文件）；
}
});
},
更新：函数（元素、valueAccessor、allBindingsAccessor）{
var file=ko.utils.unwrapobbservable（valueAccessor（））；
var bindings=allBindingsAccessor（）；
if（bindings.fileObjectURL&&ko.isObservable（bindings.fileObjectURL））{
var oldUrl=bindings.fileObjectURL（）；
如果（旧URL）{
windowURL.revokeObjectURL（oldUrl）；
}
bindings.fileObjectURL（文件和windowURL.createObjectURL（文件））；
}
if（bindings.fileBinaryData&&ko.isObservable（bindings.fileBinaryData））{
如果（！文件）{
bindings.fileBinaryData（null）；
}否则{
var reader=new FileReader（）；
reader.onload=函数（e）{
bindings.fileBinaryData（e.target.result）；
};
reader.readAsArrayBuffer（文件）；
}
}
}
};
var imageUploadModel=函数（）{
var self={}；
var slotModel=函数（）{
var，它={}；
that.imageFile=ko.observable（）；
that.imageObjectURL=ko.observable（）；
that.imageBinary=ko.observable（）；
that.fileSize=ko.computed（函数（）{
var file=this.imageFile（）；
返回文件？文件大小：0；
}，即）；
that.firstBytes=ko.computed（函数（）{
如果（that.imageBinary（））{
var buf=newuint8array（that.imageBinary（））；
var字节=[]；
对于（变量i=0；i

---

有人能建议我如何在上传按钮点击时保存图像吗？

这里有一个通过我一起擦洗过的敲除功能单键上传图像的例子

html->

<input type="file" data-bind="value: fileName, fileUpload: fileName, url: url">
<script src="{{ STATIC_URL }}html5knockoutImagePreview.js"></script>​

<input type="file" accept="image/*" name="img" data-bind="value: img, fileAdded: img, previewFunc: function(files){ $data.uploadPreview(files) }" />

我不是100%确定你的所有要求，这是JPEG，你需要调整其他类型的内容类型标题等

编辑

由于您仍然存在问题，下面是我自那时以来编写的一些代码，这些代码可能会有所帮助。但它确实使用jquery

ko绑定->

ko.bindingHandlers.filePreview = {
  update: function(element, valueAccessor, allBindingsAccessor){
      var allBindings = allBindingsAccessor()
      if(!!FileReader && valueAccessor() && element.files.length){
        var reader = new FileReader();
        reader.onload = function(event){
          var dataUri = event.target.result
          allBindings.imagePreview(dataUri)
        }
        reader.onerror = function(e) {
          console.log("error", stuff)
        }
        reader.readAsDataURL(element.files[0])
    }
  }
}

modelPageView->

, uploadPreview: function(files){
        var self = this
        self.loadingPreview(true)
        file = files[0]
        if(file.size > 20000000){
          alert("that image is a bit too big for us, got anything smaller?")
        }
        console.log("file size " + file.size)
        var formData = new FormData();
        formData.append("img", file)
        $.ajax({
          url: "/YOUR_UPLOAD_URL",
          type: 'POST',
          data: formData,
          cache: false,
          contentType: false,
          processData: false
      }).done(function(data){
         if(data === "error"){
           alert("somethign wrong happened, please refresh the page")
           return
         }
         self.imgUrl(data.img_url)
         self.imgId(data.img_id)
      }).fail(function(){
        self.loadingPreview(false)
      })
}

html->

<input type="file" data-bind="value: fileName, fileUpload: fileName, url: url">
<script src="{{ STATIC_URL }}html5knockoutImagePreview.js"></script>​

<input type="file" accept="image/*" name="img" data-bind="value: img, fileAdded: img, previewFunc: function(files){ $data.uploadPreview(files) }" />

• 这种方法的优点是有很多框架，比如表单数据 而不仅仅是图像内容类型数据更好
• 我个人认为服务器端交互应该由 所以这就是为什么代码在那里而不是在 绑定处理程序
• 如果需要，还可以使用jqueryajax对象

很抱歉延迟回复，我会在几天后到达高峰，所以如果您仍然有问题，请告诉我

---

祝你好运

免责声明->这段代码在ie 9或更低版本中不起作用，因为它们不支持html5文件api（我想你知道，因为这是你正在使用的方法，但对其他阅读本文的人来说…）嘿，fred，thnkx是你的答案，但它仍然在浏览图像，我仍然无法将浏览的图像保存在我的文件夹中。我正在为ko使用此绑定，我设置了url：“Action/Controller”，但是我需要为Action方法设置什么参数呢？HttpPostedFileBase参数始终为null。@Fred ajax可以传输图像吗？在c#httppostedfilebase中始终为空。@jmogera我认为不幸的是ajax无法传输图像，或者至少无法使用此代码传输图像。我使用了@html.Beginform，并且工作正常。