जावास्क्रिप्ट में किसी फ़ाइल ऑब्जेक्ट को तुरंत कैसे करें?

Question

Fileजावास्क्रिप्ट में एक वस्तु है। मैं परीक्षण प्रयोजनों के लिए एक त्वरित करना चाहते हैं।

मैंने कोशिश की है new File(), लेकिन मुझे "अवैध निर्माता" त्रुटि मिलती है।

क्या Fileवस्तु बनाना संभव है ?

---

फ़ाइल ऑब्जेक्ट संदर्भ: https://developer.mozilla.org/en/DOM/File

Answer 1

W3C फ़ाइल एपीआई विनिर्देश के अनुसार, फ़ाइल निर्माता को 2 (या 3) मापदंडों की आवश्यकता होती है।

तो एक खाली फ़ाइल बनाने के लिए:

var f = new File([""], "filename");

• पहला तर्क वह डेटा है जो टेक्स्ट की लाइनों की एक सरणी के रूप में प्रदान किया गया है;
• दूसरा तर्क फ़ाइल नाम है;

• तीसरा तर्क इस तरह दिखता है:

  var f = new File([""], "filename.txt", {type: "text/plain", lastModified: date})

यह फायरफॉक्स, क्रोम और ओपेरा में काम करता है, लेकिन सफारी या आईई / एज में नहीं।

Comments

Illegal constructorक्रोम 37 / उबंटू पर प्रोड्यूस करता है इसलिए यह काम नहीं करता है

— सेबस्टियन लॉबर

यह फ़ायरफ़ॉक्स 28+, क्रोम 38+ और ओपेरा 25 + में काम करता है। हालांकि, सफारी और IE अभी भी इस कंस्ट्रक्टर को लागू नहीं करते हैं (देखें caniuse.com/#feat=fileapi )। मैं वर्तमान में एक पॉलीफ़िल या इसका अनुकरण करने का एक तरीका ढूंढ रहा हूं, लेकिन अभी तक कोई उपयुक्त समाधान नहीं मिला है।

— पियरे-एड्रियन ब्यूसन

@ PA.Buisson मुझे यकीन नहीं है कि यह सभी मामलों के लिए है (यह मेरे लिए पर्याप्त था), लेकिन आप इसके बजाय ब्लॉब () कंस्ट्रक्टर का उपयोग कर सकते हैं, जैसा कि यहां बताया गया है

— रेमंडबोसवेल

विंडोज एज के लिए इसका क्या विकल्प है?

— रवि मिश्रा

IE11 के लिए, आप फ़ाइल ऑब्जेक्ट के निर्माण के लिए ब्लॉब क्लास का उपयोग कर सकते हैं। यह मुझे सबसे पोर्टेबल समाधान लगता है। file = new Blob([blobdata], {type: filetype, lastModified: filelastModified}); file.name = filename

— जेसी होगन

Answer 2

अब आप कर सकते हैं!

var parts = [
  new Blob(['you construct a file...'], {type: 'text/plain'}),
  ' Same way as you do with blob',
  new Uint16Array([33])
];

// Construct a file
var file = new File(parts, 'sample.txt', {
    lastModified: new Date(0), // optional - default = now
    type: "overide/mimetype" // optional - default = ''
});

var fr = new FileReader();

fr.onload = function(evt){
   document.body.innerHTML = evt.target.result + "<br><a href="+URL.createObjectURL(file)+" download=" + file.name + ">Download " + file.name + "</a><br>type: "+file.type+"<br>last modified: "+ file.lastModifiedDate
}

fr.readAsText(file);

Comments

नहीं, यह क्रोम में काम नहीं करता है। कोड देखें । http://www.p/chromium/issues/detail ? id=164933 सत्यापित है कि यह Chrome 36 OSX में काम नहीं करता है।

— रे निकोलस

तब मैं यह सत्यापित करूंगा कि जब आप चलाते हैं तो यह क्रोम 35 OSX में DOSE काम करता हैnew File([], '')

— अंतहीन

बस परीक्षण किया गया है, यह 35 में भी काम नहीं करता है। कृपया अपने उत्तर को इस तथ्य को प्रतिबिंबित करने के लिए समायोजित करें कि यह केवल फ़ायरफ़ॉक्स में काम करता है।

— रे निकोलस

हम्म, तुम सही हो। जब से मैंने एक प्रयोगात्मक क्रोम ध्वज को सक्रिय किया था तब से यह केवल मेरे लिए काम करता था ... dl.dropboxusercontent.com/u/3464804/jCmQr8vrGk.gif

— अंतहीन

Illegal constructorक्रोम 37 / उबंटू पर उत्पादन

— सेबस्टियन लॉर्बर

Answer 3

अपडेट करें

BlobBuilder किया गया है obsoleted आप इसे कैसे उपयोग किए जाने पर देखते हैं, आप प्रयोजनों के परीक्षण के लिए यह उपयोग कर रहे हैं।

अन्यथा बूँद के नीचे जाने की माइग्रेशन रणनीतियों के साथ नीचे लागू करें , जैसे कि उत्तर इस प्रश्न ।

इसके बजाय एक बूँद का उपयोग करें

एक विकल्प के रूप में एक बूँद है जो आप फ़ाइल के स्थान पर उपयोग कर सकते हैं क्योंकि यह वही है जो फ़ाइल इंटरफ़ेस W3C के अनुसार प्राप्त होता है :

interface File : Blob {
    readonly attribute DOMString name;
    readonly attribute Date lastModifiedDate;
};

फ़ाइल इंटरफ़ेस ब्लॉब पर आधारित है, जिसमें ब्लॉब कार्यक्षमता विरासत में मिली है और यह उपयोगकर्ता के सिस्टम पर फ़ाइलों का समर्थन करने के लिए इसका विस्तार करता है।

बूँद बनाएँ

मौजूदा जावास्क्रिप्ट विधि पर इस तरह से BlobBuilder का उपयोग करना जो XMLHttpRequestएक बूँद के माध्यम से अपलोड करने और उसकी आपूर्ति करने के लिए फ़ाइल लेता है, जो इस तरह काम करता है:

var BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder;
var bb = new BlobBuilder();

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://jsfiddle.net/img/logo.png', true);

xhr.responseType = 'arraybuffer';

bb.append(this.response); // Note: not xhr.responseText

//at this point you have the equivalent of: new File()
var blob = bb.getBlob('image/png');

/* more setup code */
xhr.send(blob);

विस्तारित उदाहरण

बाकी का नमूना jsFiddle पर एक अधिक पूर्ण फैशन में है, लेकिन सफलतापूर्वक अपलोड नहीं होगा क्योंकि मैं एक लंबी अवधि के फैशन में अपलोड तर्क को उजागर नहीं कर सकता।

Comments

यह टिप्पणी पुरानी है। BlobBuilder का उपयोग न करें, Blob कंस्ट्रक्टर का उपयोग करें। बूँद (['माथिंगी'], {प्रकार: "

— चीज़

यह कोड नहीं चलता है। TypeError: BlobBuilder एक निर्माता नहीं है

— Pointer Null

दुर्भाग्य से, BlobBuilder अप्रचलित है: developer.mozilla.org/en-US/docs/Web/API/BlobBuilder

— JD।

DataTransferItemList.addकी आवश्यकता Fileनहीं है Blob। तो मूल प्रश्न के लिए: फ़ाइल को त्वरित कैसे करें ?

— टॉम ज़ातो -

Answer 4

अब यह सभी प्रमुख ब्राउज़रों द्वारा संभव और समर्थित है: https://developer.mozilla.org/en-US/docs/Web/API/File/File

var file = new File(["foo"], "foo.txt", {
  type: "text/plain",
});

Comments

जितना यह कहने के लिए मुझे पीड़ा होती है, उतना ही धार एक प्रमुख ब्राउज़र है।

— ली एक्स

मैंने वास्तव में इसका उपयोग करने वाले बहुत से लोगों को नहीं देखा। caniuse.com/#feat=fileapi - IE 2.6%, एज - 1.4%, ओपेरा मिनी - 2.7%। पर netmarketshare.com/browser-market-share.aspx 4.3% है। यदि आप एज के बारे में परवाह करते हैं, तो कुछ वर्कअवेअर डेवलपर

— Pavel Evstigneev

Evestigneev आपने परिणामों का गलत अर्थ निकाला है क्योंकि समर्थित ब्राउज़रों का वैश्विक उपयोग लगभग 0.2% है। यह आंकड़ा है कि कितने ब्राउज़र एफ़ी का उपयोग कर रहे हैं जबकि किनारे / IE स्वयं लगभग 15% ब्राउज़र अभी भी उपयोग में हैं।

— ली एक्स

Answer 5

विचार ... DOM में पहले से मौजूद छवियों के लिए javaScript में एक फ़ाइल ऑब्जेक्ट (एपीआई) बनाने के लिए:

<img src="../img/Products/fijRKjhudDjiokDhg1524164151.jpg">

var file = new File(['fijRKjhudDjiokDhg1524164151'],
                     '../img/Products/fijRKjhudDjiokDhg1524164151.jpg', 
                     {type:'image/jpg'});

// created object file
console.log(file);

ऐसा मत करो! ... (लेकिन मैंने इसे वैसे भी किया था)

-> कंसोल ऑब्जेक्ट फ़ाइल के समान परिणाम देता है:

File(0) {name: "fijRKjokDhgfsKtG1527053050.jpg", lastModified: 1527053530715, lastModifiedDate: Wed May 23 2018 07:32:10 GMT+0200 (Paris, Madrid (heure d’été)), webkitRelativePath: "", size: 0, …}
lastModified:1527053530715
lastModifiedDate:Wed May 23 2018 07:32:10 GMT+0200 (Paris, Madrid (heure d’été)) {}
name:"fijRKjokDhgfsKtG1527053050.jpg"
size:0
type:"image/jpg"
webkitRelativePath:""__proto__:File

लेकिन वस्तु का आकार गलत है ...

मुझे ऐसा करने की आवश्यकता क्यों है?

उदाहरण के लिए, किसी उत्पाद अद्यतन के दौरान पहले से अपलोड की गई छवि प्रपत्र को अपडेट करने के दौरान अतिरिक्त छवियों के साथ जोड़ा गया

Answer 6

क्योंकि यह जावास्क्रिप्ट और डायनामिक है आप अपने स्वयं के वर्ग को परिभाषित कर सकते हैं जो फ़ाइल इंटरफ़ेस से मेल खाता है और इसके बजाय इसका उपयोग करता है।

मुझे dropzone.js के साथ सिर्फ इतना करना था क्योंकि मैं एक फ़ाइल अपलोड को अनुकरण करना चाहता था और यह फ़ाइल ऑब्जेक्ट्स पर काम करता है।