সুতরাং, মূলত, আমার একটি একক চিত্র আপলোড করতে হবে, এটি স্থানীয় স্টোরেজে সংরক্ষণ করতে হবে, তারপরে এটি পরবর্তী পৃষ্ঠায় প্রদর্শিত হবে।
বর্তমানে, আমার আমার এইচটিএমএল ফাইল আপলোড রয়েছে:
<input type='file' id="uploadBannerImage" onchange="readURL(this);" />যা পৃষ্ঠায় চিত্রটি প্রদর্শন করতে এই ফাংশনটি ব্যবহার করে
function readURL(input)
{
document.getElementById("bannerImg").style.display = "block";
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
document.getElementById('bannerImg').src = e.target.result;
}
reader.readAsDataURL(input.files[0]);
}
}চিত্রটি ব্যবহারকারীকে দেখার জন্য পৃষ্ঠায় তাত্ক্ষণিকভাবে প্রদর্শিত হবে। তারপরে তাদের বাকি ফর্মটি পূরণ করতে বলা হয়। এই অংশটি নিখুঁতভাবে কাজ করছে।
ফর্মটি সম্পূর্ণ হয়ে গেলে, তারপরে তারা 'সংরক্ষণ করুন' বোতাম টিপুন। এই বোতামটি টিপে গেলে আমি সমস্ত ফর্ম ইনপুটগুলিকে localStorageস্ট্রিং হিসাবে সংরক্ষণ করি । localStorageআইটেম হিসাবে চিত্রটি সংরক্ষণ করার জন্য আমার একটি উপায় দরকার ।
সেভ বোতামটি তাদেরকে একটি নতুন পৃষ্ঠায় নিয়ে যাবে। এই নতুন পৃষ্ঠাটি একটি টেবিলের মধ্যে ব্যবহারকারীদের ডেটা প্রদর্শন করবে, চিত্রটি শীর্ষে থাকবে।
এত সহজ এবং সরল, localStorageএকবারে 'সেভ' বোতাম টিপলে আমার ছবিটি সংরক্ষণ করতে হবে এবং তার পরের পৃষ্ঠায় চিত্রটি loanণ নিতে হবে localStorage।
আমি এই সমাধান এবং এই নিবন্ধটি মোজ: // একটি হ্যাক্স-এর মতো কিছু সমাধান পেয়েছি ।
যদিও এটি কীভাবে কাজ করে তা নিয়ে আমি এখনও খুব বিভ্রান্ত, এবং আমার কেবলমাত্র একটি সহজ সমাধানের প্রয়োজন। মূলত, getElementByIDএকবার 'সেভ' বোতাম টিপলে আমার কেবল চিত্রটি সন্ধান করতে হবে এবং তারপরে চিত্রটি প্রক্রিয়া করে সংরক্ষণ করতে হবে।