ब्राउज़र से फ़ाइल (अनुलग्नक) कैसे अपलोड करें?

Question

मुझे ब्राउज़र के लिए काम करने के लिए अनुलग्नक अपलोड नहीं मिलता है।

कुछ संकेत here, अन्य there हैं। The docs काफी अच्छे हैं लेकिन मैं इसे AJAX अपलोड में अनुवाद करने में असमर्थ हूं।

मैं एक सुपर सरल एचटीएमएल/जावास्क्रिप्ट उदाहरण (साथ या डब्ल्यू/ओ jQuery) के लिए एक फ़ाइल (उदाहरण के लिए आधुनिक) ब्राउज़र को डीबी पर फ़ाइल अपलोड करने के लिए के बिना jquery.couch.app का उपयोग करने के लिए देख रहा हूं। .js wrapper या सामान। बेसर सरल।

किसी भी मदद की सराहना की।

Answer 1

ठीक है, यहां आपकी शुद्ध जावास्क्रिप्ट फ़ाइल अपलोड कार्यान्वयन है।

बुनियादी एल्गोरिथ्म इस तरह है:

1. फ़ाइल इनपुट तत्व
2. से फ़ाइल प्राप्त करें फ़ाइल नाम प्राप्त करें और फ़ाइल वस्तु
3. बंद टाइप दस्तावेज़ का नवीनतम दस्तावेज़ संशोधन जाओ तुम प्राप्त किए गए संशोधन का उपयोग कर दस्तावेज़ के लिए करने के लिए
4. फ़ाइल अनुलग्न फ़ाइल अनुलग्न करना चाहते हैं

एचटीएमएल भाग में मूल रूप से दो तत्वों के साथ एक सरल रूप होता है, प्रकार file का इनपुट और submit प्रकार का एक बटन होता है।

<form action="/" method="post" name="upload"> 
    <input type="file" name="file" /> 
    <button type="submit" name="submit">Upload</button> 
</form> 

अब जावास्क्रिप्ट भाग में।

window.onload = function() { 
    var app = function() { 
     var baseUrl = 'http://127.0.0.1:5984/playground/'; 
     var fileInput = document.forms['upload'].elements['file']; 
     document.forms['upload'].onsubmit = function() { 
      uploadFile('foo', fileInput.files[0]); 
      return false; 
     }; 

     var uploadFile = function(docName, file) { 
      var name = encodeURIComponent(file.name), 
      type = file.type, 
      fileReader = new FileReader(), 
      getRequest = new XMLHttpRequest(), 
      putRequest = new XMLHttpRequest(); 

      getRequest.open('GET', baseUrl + encodeURIComponent(docName), 
       true); 
      getRequest.send(); 
      getRequest.onreadystatechange = function(response) { 
       if (getRequest.readyState == 4 && getRequest.status == 200) { 
        var doc = JSON.parse(getRequest.responseText); 
        putRequest.open('PUT', baseUrl + 
         encodeURIComponent(docName) + '/' + 
         name + '?rev=' + doc._rev, true); 
        putRequest.setRequestHeader('Content-Type', type); 
        fileReader.readAsArrayBuffer(file); 
        fileReader.onload = function (readerEvent) { 
         putRequest.send(readerEvent.target.result); 
        }; 
        putRequest.onreadystatechange = function(response) { 
         if (putRequest.readyState == 4) { 
          console.log(putRequest); 
         } 
        }; 
       } 
      }; 
     }; 
    }; 
    app(); 
}; 

असल में, मैं फार्म के onsubmit घटना के लिए अपने खुद के समारोह बंधन और झूठी वापस लौट कर फार्म की submit घटना रोकना।

उस घटना में हैंडलर मैं अपने मुख्य कार्य को दो पैरामीटर के साथ कॉल करता हूं। पहला दस्तावेज़ दस्तावेज है और दूसरा अपलोड करने के लिए फ़ाइल है।

मेरे uploadFile() फ़ंक्शन में मैंने फ़ाइल का नाम, फ़ाइल प्रकार सेट किया और कुछ उदाहरणों को पकड़ लिया। पहला HTTP अनुरोध दस्तावेज के वर्तमान संशोधन को प्राप्त करने के लिए एक GET अनुरोध है। यदि वह अनुरोध सफल होता है तो मैं पूर्व प्राप्त संशोधन, उचित सामग्री प्रकार सेट करके PUT अनुरोध (वास्तविक अपलोड अनुरोध) तैयार करता हूं और फिर मैं फ़ाइल को एक ArrayBuffer में परिवर्तित करता हूं। एक बार ऐसा करने के बाद मैं सिर्फ HTTP अनुरोध भेजता हूं जिसे मैंने अभी तैयार किया है और फिर मैं आराम करता हूं।

स्टैंडअलोन लगाव अपलोड योजना इस तरह दिखता है:

PUT host/database/document/filename?revision=latest-revision 

बेशक HTTP अनुरोध हेडर में उचित सामग्री प्रकार का उपयोग कर

।

नोट: मुझे अच्छी तरह पता है कि मैं यहां रक्षात्मक प्रोग्रामिंग का उपयोग नहीं कर रहा हूं, मैंने जानबूझकर ब्रेवटी के लिए किया था।