छवि अपलोड करने और knockout जेएस का उपयोग कर डेटाबेस में इसे कैसे सहेजने के लिए?

Question

हे एम एमकेसी 3 का उपयोग नॉकआउट के साथ और डेटाबेस में अपलोड की गई छवि को अपलोड और सहेजने के लिए नॉकआउट बाध्यकारी का उपयोग करने की कोशिश कर रहा है। मैं छवि को ब्राउज़ करने और प्राप्त करने में सक्षम हूं लेकिन उस छवि को सहेजने के तरीके के रूप में नहीं मिल रहा हूं। मेरी 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); 
}); 

किसी को भी मुझे सुझाव दे सकते हैं मैं कैसे अपलोड बटन पर छवि को बचा सकता है पर क्लिक करें ????? >

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

js - -

Answer 1

यहाँ नॉकआउट के माध्यम से एक क्लिक छवि अपलोड करने का एक उदाहरण मैं एक साथ

एचटीएमएल झाड़ी गया है>

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


function MainPageViewModal(){ 
    this.fileName = ko.observable() 
    this.url = "http://127.0.0.1:8000/upload" 
} 

var mainPageViewModal = new MainPageViewModal() 

ko.applyBindings(mainPageViewModal); 

fiddle

मैं मैं आपकी सभी आवश्यकताओं के 100% सुनिश्चित नहीं हूं, यह jpegs के लिए है, आपको tweak करने की आवश्यकता है अन्य प्रकार के लिए सामग्री प्रकार शीर्ष लेख आदि

संपादित

आप मुद्दे बनाते जा रहे हैं के रूप में, यहाँ कुछ कोड है कि मैं तब से लिखा है मदद कर सकता है कि है। >

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

एचटीएमएल ->

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

• इस विधि के लाभ यह उपयोग jQuery हालांकि ...

  ko बाइंडिंग करता है फॉर्म डेटाजैसे कई ढांचे हैं छवि सामग्री-प्रकार डेटा के बजायबेहतर है।

• व्यक्तिगत रूप से मुझे लगता है कि सर्वर साइड इंटरैक्शन बैकएंड मोडल द्वारा संचालित किया जाना चाहिए, यही कारण है कि बाध्यकारी हैंडलर के बजाय कोड वहां है।
• यदि आपको इसकी आवश्यकता हो तो आपको jquery AJAX ऑब्जेक्ट का जादू भी मिलता है।

उत्तर देने में देरी के बारे में खेद है, मैं कुछ दिनों में एक चोटी ले जाऊंगा, तो मुझे बताएं कि क्या आपको अभी भी समस्याएं हैं।

शुभकामनाएं!