এইচটিএমএল <ইনপুট টাইপ = 'ফাইল'> ফাইল নির্বাচন ইভেন্ট

Question

ধরা যাক আমাদের এই কোডটি রেখেছেন:

<form action='' method='POST' enctype='multipart/form-data'>
    <input type='file' name='userFile'><br>
    <input type='submit' name='upload_btn' value='upload'>
</form>

যার ফলাফল:

যখন ব্যবহারকারী 'ব্রাউজ ...' বোতামটি ক্লিক করেন, তখন একটি ফাইল অনুসন্ধান ডায়ালগ বক্স খোলা হয়:

ব্যবহারকারী ফাইলটি ডাবল-ক্লিক করে বা 'ওপেন' বোতামে ক্লিক করে ফাইলটি নির্বাচন করবেন।

এমন কোনও জাভাস্ক্রিপ্ট ইভেন্ট রয়েছে যা আমি ফাইলটি নির্বাচনের পরে জানাতে চাই?

Comments

কি মজাদার পুরানো উইন্ডোজ ইউআই!

— এল-বুরিটোস

@ এল-বুরিটোস এটি 2010 সালে পোস্ট করা হয়েছিল; অবশ্যই এটি একটি পুরানো উইন্ডোজ ইউআই: ডি

— সাইমন চেং

Answer 1

পরিবর্তন ইভেন্টটি শুনুন।

input.onchange = function(e) { 
  ..
};

Comments

আমরা এটি লিখতে যাচ্ছি .. জাভাস্ক্রিপ্ট স্ক্রিপ্ট ট্যাগগুলিতে

— চাঁদ

হ্যাঁ স্ক্রিপ্ট ট্যাগগুলিতে, বা আপনি এটি একটি বিশেষ হিসাবে যুক্ত করতে পারেন ( <input type="file" onchange="..." />) যদিও এটি প্রস্তাবিত নয়।

— অনুরাগ

মনে রাখবেন যে আই 7 এবং 8-তে 'পরিবর্তন' ইভেন্টটি ফর্ম ইভেন্টে বুদবুদ হয় না। আপনার শ্রোতাদের <ইনপুট> ট্যাগে রাখতে হবে।

— xer0x

যদি কোনও ব্যবহারকারীর একটি ফাইল "পুনরায় লোড" করতে হয় তবে কী হবে? অদলবদল ট্রিগার করবে না, তবে এটি এখনও পুনরায় লোড করা উচিত যেন এটি এটি প্রথমবার লোড হচ্ছে।

— bryc

দ্রষ্টব্য, ফাইলটি পরিবর্তন না করায় ব্যবহারকারী একাধিকবার একাধিকবার একই ফাইলটি তুলেন তবে এটি কাজ করে না।

— bob0the0miant

Answer 2

আপনাকে যখন ফাইলটি পুনরায় লোড করতে হবে, আপনি ইনপুটটির মানটি মুছতে পারেন। পরের বার আপনি কোনও ফাইল যুক্ত করবেন, 'চেঞ্জ অন' ইভেন্টটি ট্রিগার করবে।

document.getElementById('my_input').value = null;
// ^ that just erase the file path but do the trick

Comments

এটি দুর্দান্ত কাজ করে তবে অদ্ভুত IE <11 আচরণ সম্পর্কে সচেতন হন। এটি আপনাকে ইনপুটটির মান পরিবর্তন করতে দেয় না, তাই সম্ভবত আপনার একটি কর্মফলের প্রয়োজন হবে। stackoverflow.com/questions/9011644/...

— Oleksandr Tkalenko

Answer 3

jQuery উপায়:

$('input[name=myInputName]').change(function(ev) {

    // your code
});

Answer 4

আপনি বাতিল ক্লিক করুন এমনকি যদি পরিবর্তন ইভেন্ট ডাকা হয় ..

Comments

প্রশ্নগুলির স্নিপেটে কোনও পরিবর্তন অনুষ্ঠানের উল্লেখ না থাকায় আপনি নিজের উত্তরটি ব্যাখ্যা করার জন্য কিছু কোড সরবরাহ করলে এটি সহায়তা করবে

— ডেভডাইগ

আমি মনে করি @ অ্যান্থনি নিম্নলিখিত পরিস্থিতিতে বোঝাচ্ছে: একটি ফাইল নির্বাচন করুন। এখন ফাইল সিলেক্টরটি আবার খুলুন, তবে এবার বাতিল ক্লিক করুন। যেহেতু দ্বিতীয়বার কোনও ফাইল নির্বাচিত হয়নি, ফাইল ইনপুট নিয়ন্ত্রণ পুনরায় সেট করে, এভাবে এর প্রাথমিক নির্বাচনটি পরিবর্তন হয় এবং পরিবর্তন ইভেন্টটি বরখাস্ত হয়।

— dvlsc

আমি এটি ক্রোম 83 এ চেষ্টা করেছি এবং যখন আমি বাতিল বোতামটিতে ক্লিক করি তখন ইভেন্টটি বরখাস্ত হয় না। এই উত্তরটি বেশ পুরানো এবং আমার ধারণা এটি অবশ্যই ঠিক হয়ে গেছে, কমপক্ষে Chrome এ।

— সাইদ আহাদিয়ান

Answer 5

খাঁটি জেএস দিয়ে আমি এটিই করেছি:

var files = document.getElementById('filePoster');
var submit = document.getElementById('submitFiles');
var warning = document.getElementById('warning');
files.addEventListener("change", function () {
  if (files.files.length > 10) {
    submit.disabled = true;
    warning.classList += "warn"
    return;
  }
  submit.disabled = false;
});

#warning {
    text-align: center;
}

#warning.warn {
	color: red;
	transform: scale(1.5);
	transition: 1s all;
}

<section id="shortcode-5" class="shortcode-5 pb-50">
    <p id="warning">Please do not upload more than 10 images at once.</p>
    <form class="imagePoster" enctype="multipart/form-data" action="/gallery/imagePoster" method="post">
        <div class="input-group">
  	    <input id="filePoster" type="file" class="form-control" name="photo" required="required" multiple="multiple" />
	    <button id="submitFiles" class="btn btn-primary" type="submit" name="button">Submit</button>
        </div>
    </form>
</section>