আপলোড করার আগে একটি চিত্র পূর্বরূপ দেখান

Question

আমার এইচটিএমএল ফর্মে আমি টাইপ ফাইলের সাথে ইনপুট দায়ের করেছি উদাহরণস্বরূপ:

 <input type="file" multiple>

তারপরে আমি ইনপুট বোতামটি ক্লিক করে একাধিক ফাইল নির্বাচন করছি। এখন আমি ফর্ম জমা দেওয়ার আগে নির্বাচিত চিত্রগুলির পূর্বরূপটি দেখাতে চাই। এইচটিএমএল 5 এ কীভাবে করবেন?

Comments

একক চিত্র জন্য একই: stackoverflow.com/questions/4459379/...

— সিরো Santilli郝海东冠状病六四事件法轮功

angulartutorial.net/2017/02/…

— প্রশোভ

Answer 1

এইচটিএমএল 5 ফাইল এপিআই স্পেসের সাথে আসে , যা আপনাকে এমন অ্যাপ্লিকেশন তৈরি করতে দেয় যা ব্যবহারকারীকে স্থানীয়ভাবে ফাইলগুলির সাথে যোগাযোগ করতে দেয়; তার মানে আপনি ফাইলগুলি লোড করতে পারেন এবং ব্রাউজারে এগুলি করতে চান তবে ফাইলগুলি আপলোড না করেই রাখতে পারেন। ফাইল এপিআইর অংশটি হ'ল ফাইলরেডার ইন্টারফেস যা ওয়েব অ্যাপ্লিকেশনগুলিকে সংযোজনীয়ভাবে ফাইলগুলির বিষয়বস্তু পড়তে দেয়।

এখানে FileReaderক্লাসটি srcএকটি ডেটা ইউআরএল হিসাবে একটি চিত্র পড়তে শ্রেণীর ব্যবহার করে এবং একটি ডেটা ইউআরএলে একটি চিত্র ট্যাগের বৈশিষ্ট্যটি সেট করে একটি থাম্বনেইল সরবরাহ করে :

এইচটিএমএল কোড:

<input type="file" id="files" />
<img id="image" />

জাভাস্ক্রিপ্ট কোড:

document.getElementById("files").onchange = function () {
    var reader = new FileReader();

    reader.onload = function (e) {
        // get loaded data and render thumbnail.
        document.getElementById("image").src = e.target.result;
    };

    // read the image file as a data URL.
    reader.readAsDataURL(this.files[0]);
};

জাভাস্ক্রিপ্টে ফাইল এপিআই ব্যবহার করার জন্য এখানে একটি ভাল নিবন্ধ ।

নীচের এইচটিএমএল উদাহরণে কোড স্নিপেট ব্যবহারকারীর নির্বাচন থেকে চিত্রগুলি ফিল্টার করে এবং নির্বাচিত ফাইলগুলি একাধিক থাম্বনেইল পূর্বরূপগুলিতে রেন্ডার করে:

function handleFileSelect(evt) {
    var files = evt.target.files;

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

      // Only process image files.
      if (!f.type.match('image.*')) {
        continue;
      }

      var reader = new FileReader();

      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.
          var span = document.createElement('span');
          span.innerHTML = 
          [
            '<img style="height: 75px; border: 1px solid #000; margin: 5px" src="', 
            e.target.result,
            '" title="', escape(theFile.name), 
            '"/>'
          ].join('');
          
          document.getElementById('list').insertBefore(span, null);
        };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);

<input type="file" id="files" multiple />
<output id="list"></output>

Comments

এখন আপলোড করার জন্য কিছু চিত্র কীভাবে বাতিল করবেন এবং তারপরে ফর্মটি জমা দিতে হবে? এটি আমার পক্ষে সত্যিই সহায়ক হবে।

— হার্ডিক সোনদাগর

তবে আমি জানতে চাই যে কীভাবে নির্দিষ্ট ফাইলটিকে আপলোড থেকে রোধ করতে মুছে ফেলা যায়। এটি কিছু কাঠামো সংজ্ঞায়িত করা হয়।

— হার্ডিক সোনদাগর

কেবল ফাইল ইনপুট উপাদানটি অক্ষম করুন, এবং এটি আপলোড করা হবে না! সুতরাং উপরের উদাহরণে:document.getElementById("uploadImage").disabled = true

— কামায়ার নাজারী

@ কমায়ারনাজারি যদি ফাইলরেডার অবাইবেল না হয়, তবে এটি কীভাবে হবে?

— মাইকেলLuthor

অধীনে "দেখান স্নিপেট অধ্যায়" কোড স্নিপেট @Nicholas আসলে আপনি একাধিক চিত্র লোড এবং তাদের পূর্বরূপ দেয় সব

— Kamyar Nazeri

Answer 2

এখানে আমি ফাইলরেডার এপিআই ব্যবহার করে jQuery দিয়েছিলাম।

এইচটিএমএল মার্কআপ:

<input id="fileUpload" type="file" multiple />
<div id="image-holder"></div>

JQuery:

এখানে jQuery কোডে, আমি প্রথমে ফাইল এক্সটেনশনের জন্য যাচাই করি। অর্থাত্ প্রক্রিয়া করার জন্য বৈধ চিত্র ফাইলটি , তারপরে ব্রাউজার সমর্থনকারী ফাইলরেডার এপিআই হ্যাঁ কিনা তা তখনই পরীক্ষা করে নিবে কেবলমাত্র প্রক্রিয়াজাত করা অন্য কোনও সম্মানজনক বার্তা প্রদর্শন করবে

$("#fileUpload").on('change', function () {

     //Get count of selected files
     var countFiles = $(this)[0].files.length;

     var imgPath = $(this)[0].value;
     var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
     var image_holder = $("#image-holder");
     image_holder.empty();

     if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
         if (typeof (FileReader) != "undefined") {

             //loop for each file selected for uploaded.
             for (var i = 0; i < countFiles; i++) {

                 var reader = new FileReader();
                 reader.onload = function (e) {
                     $("<img />", {
                         "src": e.target.result,
                             "class": "thumb-image"
                     }).appendTo(image_holder);
                 }

                 image_holder.show();
                 reader.readAsDataURL($(this)[0].files[i]);
             }

         } else {
             alert("This browser does not support FileReader.");
         }
     } else {
         alert("Pls select only images");
     }
 });

বিস্তারিত নিবন্ধ: লাইভ ডেমো সহ চিত্রটি এটি আপলোড করার আগে প্রাকদর্শন কিভাবে করবেন, jQuery, এইচটিএমএল 5 ফাইলরেডার ()

Comments

খারাপ অভ্যাস বিবেচনা না করে যদি আপনি ঘোষণা varকরেন for loop? সব for loopবারবার নতুন পরিবর্তনশীল readerdeclear হতে হবে ..

— ফিনিক্স

accept="image/*"<ইনপুট> এ অ্যাট্রিবিউট যুক্ত করা ইমেজবিহীন ফাইলের প্রকারগুলি নির্বাচন করা থেকে রোধ করতে সহায়তা করতে পারে।

— আগস্ট

আমি কীভাবে চিত্রের পূর্বরূপ সহ চিত্রগুলির নামগুলি প্রদর্শন করতে পারি?

— নবীনবোস

Answer 3

function handleFileSelect(evt) {
    var files = evt.target.files;

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

      // Only process image files.
      if (!f.type.match('image.*')) {
        continue;
      }

      var reader = new FileReader();

      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.
          var span = document.createElement('span');
          span.innerHTML = 
          [
            '<img style="height: 75px; border: 1px solid #000; margin: 5px" src="', 
            e.target.result,
            '" title="', escape(theFile.name), 
            '"/>'
          ].join('');
          
          document.getElementById('list').insertBefore(span, null);
        };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);

<input type="file" id="files" multiple />
<output id="list"></output>

Answer 4

ব্যাকগ্রাউন্ড চিত্রগুলির জন্য, ব্যবহার নিশ্চিত করুন url()

node.backgroundImage = 'url(' + e.target.result + ')';