मुझे अपलोड करने से पहले एक छवि को प्रीलोड करने के लिए एक मेथोड मिल जाता है, लेकिन मेरे पास एक फ़ाइल इनपुट से अधिक है। और मैं प्रत्येक इनपुट फ़ाइल के लिए छवि को प्रीलोड करना चाहता हूं। जेनेरेल में कोई बड़ी समस्या नहीं है लेकिन वेबसाइट पर कितनी फाइल इनपुट का उपयोग किया जाता है यह स्थिर नहीं है। एक उपयोगकर्ता अपलोड छवि ब्लॉक जोड़ सकता है ताकि वह 2 या 3 जोड़ सके और मैं चाहता हूं कि प्रत्येक के लिए वह छवि को प्रीलोड करने की संभावना का विज्ञापन करे। लेकिन मेरा अनुभव उस स्तर तक नहीं पहुंचता जिसकी उसे जरूरत है। तो मेरा सवाल है कि क्या इसे साकार करना संभव है? एक विशिष्ट फ़ाइल इनपुट के लिए छवि को प्रीलोड करने के लिए मेरा कोड यह है:

    function readURL(input) {
          if (input.files && input.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                              $('#blah')
                                        .attr('src', e.target.result)
                                        .height(50);
                    };
                    reader.readAsDataURL(input.files[0]);
          }
}

यदि कोई उपयोगकर्ता एक छवि ब्लॉक जोड़ता है तो यह इस तरह दिखता है:

<div id="divImage-1" class="form-group form-file-upload">
<label id="labelImage-1" for="labelImage2-1">New Picture</label>
<div></div>
<label id="labelImage2-1" for="inputImage-1" class="form-file-upload1">Upload Image</label>
<input id="inputImage-1" type="file" onchange="readURL(this);">
<img id="blah" height="50" alt="Image preview">
</div>

यदि उपयोगकर्ता दूसरा बनाता है तो सभी आईडी 2 (divImage-2) तक गिने जाते हैं।

-1
Laze Ho 31 मार्च 2020, 16:32

1 उत्तर

सबसे बढ़िया उत्तर

आइए आपको इसे अपने एचटीएमएल में मानते हैं

<button class="btn btn-primary" id="addBtn">Add Image Block</button>

<div class="container"></div>

फिर, पहले चरण के रूप में आपको दो वैश्विक चर बनाने होंगे:

  1. let imageBlockCout = 0 इमेज ब्लॉक की संख्या गिनने के लिए।
  2. let addedPicSet = nnew Set() पिक नामों का एक सेट जो अन्य ब्लॉक द्वारा उपयोग किया जा रहा है।

फिर ऐड बटन पर हर क्लिक के लिए हम कोड के साथ इमेज का एक नया ब्लॉक जोड़ेंगे, जो कहते हैं:

    $(
      $.parseHTML(
        `<div class="row">
                <input type="file" multiple id="photos-${imageBlockCount}">
                <div id="gallery-${imageBlockCount}" class="row"></div>
             </div>`
      )
    ).appendTo(".container");

अब, जोड़े गए प्रत्येक फ़ाइल इनपुट के लिए आपको एक ऑन-चेंज श्रोता संलग्न करना होगा:

   let currentBlockCount = imageBlockCount;
    $("#photos-" + imageBlockCount).on("change", function () {
      let input = this;

      if (!input.files) {
        return;
      }

      //for every image that has been read by FileReader we show it
      //in its own card inside its button gallery
      let onFileLoaded = function (event) {
        $(
          $.parseHTML(
            `<div class="col-sm-3">
                <div class="card">
                  <img 
                    class="card-img-top" 
                    src="${event.target.result}">
                </div>
              </div`
          )
        ).appendTo("#gallery-" + currentBlockCount);
      };

      //input.files is an array like object, so we convert it to array
      Array.from(input.files)
        .filter(
          //first we filter images which are already in use
          (file) => !addedPicSet.has(file.name)
        )
        .forEach((file) => {
          let reader = new FileReader();
          //we attach an onLoad listener for each reader
          reader.onload = onFileLoaded;

          //then we tell the reader object which file to read
          reader.readAsDataURL(file);

          //add the image name in the set of used image names
          addedPicSet.add(file.name);
        });
    });

मैंने आपकी मदद के लिए एक पेन भी बनाया है: https://codepen.io/abdullah-shabaz/ पेन/क्यूबीडीवीजेडएमक्यू

2
aby.js 31 मार्च 2020, 17:07