কীভাবে জাভাস্ক্রিপ্টে কোনও ফাইল অবজেক্ট ইনস্ট্যান্ট করবেন?

Question

Fileজাভাস্ক্রিপ্টে একটি অবজেক্ট আছে। আমি পরীক্ষার উদ্দেশ্যে একটি তাত্ক্ষণিক করতে চাই।

আমি চেষ্টা করেছি new File(), তবে আমি একটি "অবৈধ নির্মাণকারী" ত্রুটি পেয়েছি।

এটি কি কোনও Fileঅবজেক্ট তৈরি করা সম্ভব ?

---

ফাইল অবজেক্টের রেফারেন্স: https://developer.mozilla.org/en/DOM/File

Answer 1

ডাব্লু 3 সি ফাইল এপিআই স্পেসিফিকেশন অনুযায়ী ফাইল কনস্ট্রাক্টরের 2 (বা 3) পরামিতি প্রয়োজন।

সুতরাং একটি খালি ফাইল তৈরি করতে করুন:

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

• প্রথম যুক্তি হ'ল পাঠ্য রেখার অ্যারে হিসাবে সরবরাহ করা ডেটা;
• দ্বিতীয় যুক্তি ফাইল নাম;

• তৃতীয় যুক্তিটির মতো দেখাচ্ছে:

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

এটি ফায়ারফক্স, ক্রোম এবং অপেরাতে কাজ করে তবে সাফারি বা আইই / এজে নয়।

Comments

Illegal constructorক্রোম 37 / উবুন্টুতে উত্পাদন করে তাই এটি কোনও কাজ করে না

— সেবাস্তিয়ান লরবার

এটি ফায়ারফক্স ২৮++, ক্রোম 38+ এবং অপেরা 25 + এ কাজ করে। যাইহোক, সাফারি এবং আইই আজও এই নির্মাতাকে বাস্তবায়ন করে না (দেখুন ক্যানিজিউজ //#feat=fileapi )। আমি বর্তমানে একটি পলিফিল বা এটি অনুকরণ করার একটি উপায় খুঁজছি, তবে এখন পর্যন্ত কোনও উপযুক্ত সমাধান খুঁজে পাইনি।

— পিয়েরে-অ্যাড্রিয়েন বুইসন

@ পিএ.বুইসন আমি নিশ্চিত নই যে এটি সব ক্ষেত্রেই রয়েছে (এটি আমার পক্ষে যথেষ্ট ছিল) তবে আপনি এখানে ব্লব () নির্মাতা ব্যবহার করতে পারেন, যেমনটি এখানে

— রায়মন্ডসোভলে

উইন্ডোজ প্রান্ত জন্য এই বিকল্প কি?

— রবি মিশ্র

আইই 11 এর জন্য, আপনি কোনও ফাইল অবজেক্ট তৈরি করতে ব্লব বর্গ ব্যবহার করতে পারেন। এটি আমার কাছে সবচেয়ে বহনযোগ্য সমাধান বলে মনে হচ্ছে। 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

না, এটি ক্রোমে কাজ করে না। কোড . google.com/p/chromium/issues/detail?id=164933 দেখুন । যাচাই করা হয়েছে যে এটি Chrome 36 OSX এ কাজ করে না।

— রায় নিকোলাস

তারপরে আমি যাচাই করব যে এটি যখন আপনি চালাবেন তখন এটি ক্রোম 35 ওএসএক্স-এ কাজ করেnew File([], '')

— অন্তহীন

সবেমাত্র পরীক্ষিত, এটি 35 টির মধ্যেও কাজ করে না। এটি কেবল ফায়ারফক্সে কাজ করে তা প্রতিফলিত করতে আপনার উত্তরটি সামঞ্জস্য করুন।

— রে নিকোলাস

হুম, আপনি ঠিক বলেছেন। এটি কেবলমাত্র আমার জন্য কাজ করেছে যেহেতু আমি একটি পরীক্ষামূলক ক্রোম পতাকা সক্রিয় করেছি ... dl.DPboxusercontent.com/u/3464804/jCmQr8vrGk.gif

— অন্তহীন

উত্পাদন Illegal constructorক্রোম 37 / উবুন্টু তে

— সেবাস্টিয় Lorber

Answer 3

হালনাগাদ

আপনি যদি পরীক্ষার উদ্দেশ্যে এটি ব্যবহার করে থাকেন তবে আপনি কীভাবে এটি ব্যবহার করতে যাচ্ছেন তা দেখতে ব্লববিল্ডারকে অচল করে দেওয়া হয়েছে ।

অন্যথায় ব্লব যাওয়ার মাইগ্রেশন কৌশলগুলি যেমন নীচের প্রয়োগ করুন যেমন এই প্রশ্নের উত্তর ।

পরিবর্তে একটি ব্লব ব্যবহার করুন

বিকল্প হিসাবে সেখানে একটি ব্লব রয়েছে যা আপনি ফাইলের জায়গায় ব্যবহার করতে পারবেন কারণ ফাইল ইন্টারফেসটি ডাব্লু 3 সি অনুচ্ছেদে অনুযায়ী প্রাপ্ত হয়েছে :

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

ফাইল ইন্টারফেসটি ব্লবের উপর ভিত্তি করে ব্লব কার্যকারিতা উত্তরাধিকার সূত্রে প্রাপ্ত এবং ব্যবহারকারীর সিস্টেমে ফাইলগুলি সমর্থন করার জন্য এটি প্রসারিত করে।

ব্লব তৈরি করুন

একটি বিদ্যমান জাভাস্ক্রিপ্ট পদ্ধতিতে এটির মতো ব্লববিল্ডার ব্যবহার করা যা কোনও ফাইলকে আপলোড করার জন্য একটি ফাইল আপলোড করতে 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);

বর্ধিত উদাহরণ

বাকি নমুনাটি আরও সম্পূর্ণ ফ্যাশনে jsFizz এ রয়েছে তবে আমি সফলভাবে আপলোড করব না কারণ আমি আপলোড যুক্তিকে দীর্ঘমেয়াদী ফ্যাশনে প্রকাশ করতে পারি না।

Comments

এই মন্তব্যটি পুরানো। ব্লববিল্ডার ব্যবহার করবেন না, ব্লব কনস্ট্রাক্টর ব্যবহার করুন। ব্লব (['মাইথিংটি'], {প্রকার: "জিনিস"})

— ওডিনহো - ভেলমন্ট

এই কোডটি চালায় না। TypeError: ব্লববিল্ডার কোনও নির্মাণকারী নয়

— পয়েন্টার নুল

দুর্ভাগ্যক্রমে, ব্লববিল্ডার অপ্রচলিত: developer.mozilla.org/en-US/docs/Web/API/BlobBuilder

— জেডি।

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% হয়। আপনি যদি এজ সম্পর্কে যত্নশীল হন তবে কিছু

— কার্যনির্বাহী

অনুসন্ধানীভা আপনি ফলাফলগুলি ভুল ব্যাখ্যা করেছেন কারণ সমর্থিত ব্রাউজারগুলির প্রায় বিশ্বব্যাপী 0.2% ব্যবহার রয়েছে। এই চিত্রটি হ'ল কত ব্রাউজারগুলি এপিআই ব্যবহার করছে যখন প্রান্ত / আইআই নিজেই প্রায় 15% ব্রাউজার ব্যবহার করছেন।

— ল এক্স এক্স

Answer 5

ধারণাটি ... ডিওমে উপস্থিত ইমেজগুলির জন্য জাভা স্ক্রিপ্টে একটি ফাইল অবজেক্ট (এপিআই) তৈরি করতে:

<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

কারণ এটি জাভাস্ক্রিপ্ট এবং গতিশীল আপনি নিজের শ্রেণীর সংজ্ঞা দিতে পারেন যা ফাইল ইন্টারফেসের সাথে মেলে এবং পরিবর্তে এটি ব্যবহার করতে পারেন।

ড্রপজোন.জেএস দিয়ে আমাকে কেবল এটি করতে হয়েছিল কারণ আমি একটি ফাইল আপলোড অনুকরণ করতে চেয়েছিলাম এবং এটি ফাইল অবজেক্টে কাজ করে।