javascript जावास्क्रिप्ट: फ़ाइल अपलोड किए बिना फ़ाइल अपलोड करना




file-upload extjs (5)

मैं वास्तव में उपयोगकर्ता से फ़ाइल इनपुट का उपयोग किए बिना एक फ़ाइल अपलोड नकली करने की कोशिश कर रहा हूं। फ़ाइल की सामग्री एक स्ट्रिंग से गतिशील रूप से जेनरेट की जाएगी।

क्या यह संभव है? क्या किसी ने कभी यह पहले किया है? क्या उदाहरण / सिद्धांत उपलब्ध हैं?

स्पष्टीकरण के लिए, मुझे पता है कि एक छिपी आईफ्रेम और दोस्तों का उपयोग करके AJAX तकनीकों का उपयोग करके फ़ाइल अपलोड करने के लिए - समस्या उस फ़ाइल को अपलोड कर रही है जो फ़ॉर्म में नहीं है।

मैं ExtJS का उपयोग कर रहा हूं, लेकिन jQuery भी व्यवहार्य है क्योंकि ExtJS इसमें प्लग कर सकता है (ext-jquery-base)।

https://code.i-harness.com


JQuery के साथ "नकली" फ़ाइल अपलोड करने का आसान तरीका:

var fd = new FormData();
var file = new Blob(['file contents'], {type: 'plain/text'});

fd.append('formFieldName', file, 'fileName.txt');

$.ajax({
  url: 'http://example.com/yourAddress',
  method: 'post',
  data: fd,
  processData: false,        //this...
  contentType: false         //and this is for formData type
});

एक फ़ाइल अपलोड करें, यह फ़ाइल फ़ाइल के साथ ठीक से एक POST अनुरोध है जो ठीक से एन्कोड किया गया है और एक विशेष multipart/formdata हेडर के साथ। आपको उस <input type=file /> का उपयोग करने की आवश्यकता है क्योंकि आपकी ब्राउज़र सुरक्षा आपको सीधे उपयोगकर्ता डिस्क तक पहुंचने के लिए मना करती है।

चूंकि आपको उपयोगकर्ता डिस्क को पढ़ने की आवश्यकता नहीं है, हां , आप इसे जावास्क्रिप्ट का उपयोग करके नकली बना सकते हैं। यह सिर्फ एक XMLHttpRequest । एक "प्रामाणिक" अपलोड अनुरोध बनाने के लिए, आप Fiddler इंस्टॉल कर सकते हैं और अपने आउटगोइंग अनुरोध का निरीक्षण कर सकते हैं।

आपको उस फ़ाइल को सही तरीके से एन्कोड करने की आवश्यकता होगी, इसलिए यह लिंक बहुत उपयोगी हो सकता है: आरएफसी 2388: प्रपत्रों से रिटर्निंग मान: मल्टीपार्ट / फॉर्म-डेटा


पेलोड में अंतिम boundary से पहले अतिरिक्त '--' जोड़े जाने के बाद https://.com/a/2198524/2914587 मेरे लिए काम किया:

var body = '--' + boundary + '\r\n'
         // Parameter name is "file" and local filename is "temp.txt"
         + 'Content-Disposition: form-data; name="file";'
         + 'filename="temp.txt"\r\n'
         // Add the file's mime-type
         + 'Content-type: plain/text\r\n\r\n'
         + data + '\r\n'
         + '--' + boundary + '--';

मैंने फ़ायरफ़ॉक्स TamperData एडन के साथ इस POST_DATA स्ट्रिंग को अभी पकड़ा है। मैंने "myfile" नामक एक type="file" फ़ील्ड और "अपलोड" मूल्य के साथ "btn-submit" नामक एक सबमिट बटन के साथ एक फॉर्म सबमिट किया। अपलोड की गई फाइल की सामग्री हैं

Line One
Line Two
Line Three

तो यहां POST_DATA स्ट्रिंग है:

-----------------------------192642264827446\r\n
Content-Disposition: form-data;    \n
name="myfile"; filename="local-file-name.txt"\r\n
Content-Type: text/plain\r\n
\r\n
Line \n
One\r\n
Line Two\r\n
Line Three\r\n
\r\n
-----------------------------192642264827446\n
\r\n
Content-Disposition: form-data; name="btn-submit"\r\n
\r\n
Upload\n
\r\n
-----------------------------192642264827446--\r\n

मुझे यकीन नहीं है कि संख्या का मतलब क्या है (1 9 2642264827446), लेकिन यह पता लगाने में बहुत मुश्किल नहीं होना चाहिए।


POST के साथ XMLHttpRequest() उपयोग क्यों न करें?

function beginQuoteFileUnquoteUpload(data)
{
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "http://www.mysite.com/myuploadhandler.php", true);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.onreadystatechange = function ()
    {
        if (xhr.readyState == 4 && xhr.status == 200)
            alert("File uploaded!");
    }
    xhr.send("filedata="+encodeURIComponent(data));
}

सर्वर पर हैंडलर स्क्रिप्ट सिर्फ फ़ाइल डेटा को फ़ाइल में लिखती है।

संपादित करें
फ़ाइल अपलोड अभी भी एक अलग सामग्री प्रकार के साथ एक http पोस्ट है। आप इस सामग्री प्रकार का उपयोग कर सकते हैं और अपनी सामग्री को सीमाओं से अलग कर सकते हैं:

function beginQuoteFileUnquoteUpload(data)
{
    // Define a boundary, I stole this from IE but you can use any string AFAIK
    var boundary = "---------------------------7da24f2e50046";
    var xhr = new XMLHttpRequest();
    var body = '--' + boundary + '\r\n'
             // Parameter name is "file" and local filename is "temp.txt"
             + 'Content-Disposition: form-data; name="file";'
             + 'filename="temp.txt"\r\n'
             // Add the file's mime-type
             + 'Content-type: plain/text\r\n\r\n'
             + data + '\r\n'
             + boundary + '--';

    xhr.open("POST", "http://www.mysite.com/myuploadhandler.php", true);
    xhr.setRequestHeader(
        "Content-type", "multipart/form-data; boundary="+boundary

    );
    xhr.onreadystatechange = function ()
    {
        if (xhr.readyState == 4 && xhr.status == 200)
            alert("File uploaded!");
    }
    xhr.send(body);
}

यदि आप अतिरिक्त डेटा भेजना चाहते हैं, तो आप प्रत्येक अनुभाग को सीमा के साथ अलग करें और प्रत्येक अनुभाग के लिए सामग्री-स्वभाव और सामग्री-प्रकार शीर्षलेखों का वर्णन करें। प्रत्येक हेडर को एक नई लाइन से अलग किया जाता है और शरीर को अतिरिक्त अतिरिक्त लाइन से हेडर से अलग किया जाता है। स्वाभाविक रूप से, इस फैशन में बाइनरी डेटा अपलोड करना थोड़ा और कठिन होगा :-)

आगे संपादित करें: उल्लेख करना भूल गया है, सुनिश्चित करें कि जो भी सीमा स्ट्रिंग आपके द्वारा भेजी जा रही टेक्स्ट "फ़ाइल" में नहीं है, अन्यथा इसे सीमा के रूप में माना जाएगा।








extjs