मैं उन सभी छवियों को साफ़ करना चाहता हूं जो अपलोड की गई हैं यदि अधिकतम अपलोड सीमा तक पहुंच गई है। अगर मैं ब्राउज़ बटन का उपयोग करके छवियां अपलोड करता हूं तो यह मेरे द्वारा अपलोड की गई सभी छवियों को दिखाता है। लेकिन मैं जो हासिल करने की कोशिश कर रहा हूं वह यह है कि अगर मैं 4 फोटो अपलोड करता हूं तो यह या तो सभी अपलोड किए गए फोटो को रीसेट कर देना चाहिए या उपयोगकर्ता को पहले स्थान पर 4 फोटो से अधिक लोड करने की अनुमति नहीं देनी चाहिए। मेरे मामले में यदि मैं अधिक हूं तो 4 फोटो।

मेरा एचटीएमएल।

<div class="form-group">
   <label class="col-sm-4 control-label text_left">Upload Image(s)</label>
   <div class="col-sm-8">
      <div>
         <input type="file" id="files" name="media" multiple accept="image/*" />
         <output id="list"></output>
      </div>
   </div>
</div> 

मेरी स्क्रिप्ट..

$(function(){
    $('#files').change(function(){
       var $fileUpload = $("input[type='file']");
       if (parseInt($fileUpload.get(0).files.length)>4){
           alert("You can only upload a maximum of 4 files");
           ("#files").replaceWith($("#files").val('').clone(true));
           ("#files")[0].value = "";
       }
    });
});

क्रिप्या मेरि सहायता करे।

0
Abi Waqas 12 अप्रैल 2017, 08:57

2 जवाब

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

FileList केवल पढ़ने के लिए है। <input type="file"> तत्व की .files संपत्ति से आइटम सेट करना या हटाना संभव नहीं है जो FileList ऑब्जेक्ट का प्रतिनिधित्व करता है। parseInt() कॉल आवश्यक नहीं है, .files.length एक पूर्णांक देता है।

यदि आप अपलोड को चार उपयोगकर्ता चयनित फ़ाइलों तक सीमित करने का प्रयास कर रहे हैं, तो आप .files को पुनरावृति कर सकते हैं, केवल पहली चार फ़ाइलों को FormData ऑब्जेक्ट में जोड़ सकते हैं, फिर FormData को सर्वर पर पोस्ट कर सकते हैं।

var limit = 4;

$(":file").on("change", function() {
    var n = 0;
    var fd = new FormData();
    for (let file of this.files) {
      fd.append("file" + n++, file);
      if (n === limit) break;
    }
    console.log(Array.from(fd.keys()).length);
    for (let [key, prop] of fd.entries()) {
      console.log(key, prop)
    }
    // $.post("/path/to/server", fd)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
   <label class="col-sm-4 control-label text_left">Upload Image(s)</label>
   <div class="col-sm-8">
      <div>
         <input type="file" id="files" name="media" multiple accept="image/*" />
         <output id="list"></output>
      </div>
   </div>
</div>

वैकल्पिक

if (this.files.length > 4) {
  // do nothing
} else {
  // do stuff with files
}
0
guest271314 12 अप्रैल 2017, 09:28

आपको replaceWith की आवश्यकता नहीं है। एक साधारण .val("") file input को साफ कर देगा।

$("#upl").on("change", function() {
  if ($("#upl").get(0).files.length > 4) {
    alert("You cant upload more than 4 files.");
    $("#upl").val("");
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="upl" multiple/>
0
Ozan 12 अप्रैल 2017, 09:09