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




file-upload extjs (7)

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

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

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

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


Answers

पेलोड में अंतिम boundary से पहले अतिरिक्त '--' जोड़े जाने के बाद https://stackoverflow.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 + '--';

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

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

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


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

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

var formData = new FormData();
var blob = new Blob(['Lorem ipsum'], { type: 'plain/text' });
formData.append('file', blob,'readme.txt');

var request = new XMLHttpRequest();
request.open('POST', 'http://example.org/upload');
request.send(formData);

फ़ाइल एपीआई सभी मौजूदा ब्राउज़रों (आईई 10 +) द्वारा समर्थित है


मैंने फ़ायरफ़ॉक्स 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), लेकिन यह पता लगाने में बहुत मुश्किल नहीं होना चाहिए।


केवल अंतिम परिणाम साझा करना, जो काम करता है - और हार्डकोडिंग के बिना पैरामीटर जोड़ने / हटाने का साफ तरीका है।

var boundary = '-----------------------------' +
            Math.floor(Math.random() * Math.pow(10, 8));

    /* Parameters go here */
var params = {
    file: {
        type: 'text/plain',
        filename: Path.utils.basename(currentTab.id),
        content: GET_CONTENT() /* File content goes here */
    },
    action: 'upload',
    overwrite: 'true',
    destination: '/'
};

var content = [];
for(var i in params) {
    content.push('--' + boundary);

    var mimeHeader = 'Content-Disposition: form-data; name="'+i+'"; ';
    if(params[i].filename)
        mimeHeader += 'filename="'+ params[i].filename +'";';
    content.push(mimeHeader);

    if(params[i].type)
        content.push('Content-Type: ' + params[i].type);

    content.push('');
    content.push(params[i].content || params[i]);
};

    /* Use your favorite toolkit here */
    /* it should still work if you can control headers and POST raw data */
Ext.Ajax.request({
    method: 'POST',
    url: 'www.example.com/upload.php',
    jsonData: content.join('\r\n'),
    headers: {
        'Content-Type': 'multipart/form-data; boundary=' + boundary,
        'Content-Length': content.length
    }
});

यह सभी आधुनिक ब्राउज़रों पर काम करने के लिए परीक्षण किया गया था, जिनमें तक सीमित नहीं है:

  • IE6 +
  • एफएफ 1.5+
  • ओपेरा 9 +
  • क्रोम 1.0+
  • सफारी 3.0+

शायद छह साल के सबसे अचूक लोगों के अलावा थोड़ा सा, लेकिन कुछ उदाहरण जो जावास्क्रिप्ट में बंद होने की अवधारणा को बनाने में मदद करते हैं, मेरे लिए क्लिक करें।

एक बंद करना एक ऐसा फ़ंक्शन है जिसमें किसी अन्य फ़ंक्शन के दायरे (इसके चर और फ़ंक्शन) तक पहुंच होती है। एक बंद करने का सबसे आसान तरीका एक समारोह के भीतर एक समारोह के साथ है; कारण यह है कि जावास्क्रिप्ट में एक फ़ंक्शन के पास हमेशा इसके फ़ंक्शन के दायरे तक पहुंच होती है।

function outerFunction() {
    var outerVar = "monkey";
    
    function innerFunction() {
        alert(outerVar);
    }
    
    innerFunction();
}

outerFunction();

अलर्ट: बंदर

उपर्युक्त उदाहरण में, बाहरी फ़ंक्शन को कॉल किया जाता है जो बदले में आंतरिक फ़ंक्शन को कॉल करता है। ध्यान दें कि बाहरीवृत्त के लिए outerVar कैसे उपलब्ध है, यह बाहरी तरफ के मूल्य को सही ढंग से सतर्क करके प्रमाणित है।

अब निम्नलिखित पर विचार करें:

function outerFunction() {
    var outerVar = "monkey";
    
    function innerFunction() {
        return outerVar;
    }
    
    return innerFunction;
}

var referenceToInnerFunction = outerFunction();
alert(referenceToInnerFunction());

अलर्ट: बंदर

संदर्भ ToonerFunction बाहरी फ़ंक्शन () पर सेट है, जो केवल आंतरिक फ़ंक्शन का संदर्भ देता है। जब संदर्भ ToInnerFunction कहा जाता है, यह बाहरी वार देता है। दोबारा, जैसा कि ऊपर दिया गया है, यह दर्शाता है कि आंतरिक समारोह के बाहरी बाहरी, बाहरी कार्यक्षमता का एक चर है। इसके अलावा, यह ध्यान रखना दिलचस्प है कि निष्कर्ष निष्पादन समाप्त होने के बाद भी यह इस पहुंच को बरकरार रखता है।

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

function outerFunction() {
    var outerVar = "monkey";
    
    function innerFunction() {
        return outerVar;
    }
    
    return innerFunction;
}

var referenceToInnerFunction = outerFunction();
alert(referenceToInnerFunction());

outerFunction = null;
alert(referenceToInnerFunction());

अलर्ट: बंदर अलर्ट: बंदर

लेकिन ऐसा कैसे है? संदर्भ कैसे इंटरेक्शन फ़ंक्शन अभी भी बाहरीवार के मान को जान सकता है कि बाहरी फ़ंक्शन को शून्य पर सेट किया गया है?

कारण है कि संदर्भ ToInnerFunction अभी भी बाहरी तरफ के मान तक पहुंच सकता है क्योंकि जब बंदरगाह को बाहरी फ़ंक्शन के अंदर आंतरिक फ़ंक्शन को रखकर बनाया गया था, आंतरिक फ़ंक्शन ने बाहरी कार्यक्षेत्र के दायरे (इसके चर और फ़ंक्शन) को अपनी दायरे श्रृंखला में संदर्भ जोड़ा। इसका अर्थ यह है कि आंतरिक समारोह में बाह्यवर्ती समेत बाहरी फ़ंक्शन के चर के लिए एक सूचक या संदर्भ होता है। तो जब बाहरी निष्पादन निष्पादन समाप्त हो गया है, या यहां तक ​​कि अगर इसे हटा दिया गया है या शून्य पर सेट किया गया है, तो बाहरी क्षेत्र की तरह, इसके दायरे में चर, स्मृति में चारों ओर चिपकते हैं क्योंकि इन्हें आंतरिक फ़ंक्शन के हिस्से में उनके संदर्भ में उत्कृष्ट संदर्भ के कारण याद किया जाता है referenceToInnerFunction। वास्तव में बाहरी वायर और शेष बाहरी समारोह के स्मृति को स्मृति से मुक्त करने के लिए आपको इन उत्कृष्ट संदर्भों से छुटकारा पाना होगा,संदर्भ के लिए इनरफंक्शन को भी सेट करके सेट करें।

//////////

नोट करने के करीब बंद करने के बारे में दो अन्य चीजें। सबसे पहले, बंद होने पर हमेशा इसके युक्त फ़ंक्शन के अंतिम मानों तक पहुंच होगी।

function outerFunction() {
    var outerVar = "monkey";
    
    function innerFunction() {
        alert(outerVar);
    }
    
    outerVar = "gorilla";

    innerFunction();
}

outerFunction();

अलर्ट: गोरिला

दूसरा, जब एक बंद किया जाता है, तो यह अपने सभी संलग्न कार्य के चर और कार्यों के संदर्भ को बरकरार रखता है; यह लेने और चुनने के लिए नहीं मिलता है। और इसलिए, बंद होने का उपयोग कम से कम, या कम से कम सावधानी से किया जाना चाहिए, क्योंकि वे स्मृति गहन हो सकते हैं; एक युक्त फ़ंक्शन निष्पादित करने के बाद बहुत सारे चर मेमोरी में रखा जा सकता है।





javascript file-upload extjs