अपलोड से पहले एक छवि पूर्वावलोकन दिखाएं

Question

मेरे HTML फॉर्म में मेरे पास उदाहरण के लिए टाइप फ़ाइल के साथ इनपुट दर्ज है:

 <input type="file" multiple>

फिर मैं उस इनपुट बटन पर क्लिक करके कई फाइलों का चयन कर रहा हूं। अब मैं फॉर्म सबमिट करने से पहले चयनित छवियों का पूर्वावलोकन दिखाना चाहता हूं। HTML 5 में कैसे करें?

Comments

एकल छवि के लिए समान: stackoverflow.com/questions/4459379/…

— Ciro Santilli 病 六四 stack stack 事件

angulartutorial.net/2017/02/…

— Prashobh

Answer 1

एचटीएमएल 5 फाइल एपीआई युक्ति के साथ आता है , जो आपको ऐसे एप्लिकेशन बनाने की अनुमति देता है जो उपयोगकर्ता को स्थानीय रूप से फाइलों के साथ इंटरैक्ट करने देता है; इसका मतलब है कि आप फ़ाइलों को लोड कर सकते हैं और उन्हें ब्राउज़र में रेंडर कर सकते हैं बिना वास्तव में फाइल अपलोड करने के। फ़ाइल API का एक हिस्सा FileReader इंटरफ़ेस है जो वेब एप्लिकेशन को अतुल्यकालिक रूप से फ़ाइलों की सामग्री को पढ़ने देता है।

यहां एक त्वरित उदाहरण है जो FileReaderकिसी छवि को पढ़ने के लिए DataURL के रूप में कक्षा का उपयोग करता है और srcएक छवि टैग की विशेषता को डेटा URL पर सेट करके एक थंबनेल प्रदान करता है :

HTML कोड:

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

यहाँ जावास्क्रिप्ट में फ़ाइल एपीआई का उपयोग करने पर एक अच्छा लेख है ।

नीचे HTML उदाहरण में कोड स्निपेट उपयोगकर्ता के चयन से छवियों को फ़िल्टर करता है और चयनित फ़ाइलों को कई थंबनेल पूर्वावलोकन में प्रदान करता है:

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

— काम्येर नाज़री

@KamyarNazeri अगर FileReader उपलब्ध नहीं है, तो इसके बारे में कैसे?

— माइकललहट

@ नाइकोलस "स्निपेट अनुभाग दिखाएं" के तहत कोड स्निपेट वास्तव में आपको कई छवियों को लोड करने और उन सभी का पूर्वावलोकन करने की अनुमति देता है

— काम्य नाजेरी

Answer 2

यहाँ मैंने FileReader API का उपयोग करके jQuery के साथ किया।

एचटीएमएल मार्कअप:

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

jQuery:

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

$("#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, HTML5 FileReader ()

Comments

नहीं है बुरा व्यवहार पर विचार अगर आप declear varमें for loop? हर समय for loopनया चर readerस्पष्ट होगा ..

— फीनिक्स

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 + ')';