এইচটিএমএল ইনপুট ফাইল নির্বাচন ইভেন্ট একই ফাইলটি বেছে নেওয়ার পরে গুলি চালাচ্ছে না

Question

ব্যবহারকারীর inputটাইপ fileউপাদানগুলির এইচটিএমএল তৈরি করা প্রতিটি ফাইল নির্বাচন সনাক্ত করার কোনও সুযোগ আছে কি ?

এটি এর আগেও অনেকবার জিজ্ঞাসা করা হয়েছিল, তবে onchangeব্যবহারকারী যদি একই ফাইলটি আবার নির্বাচন করেন তবে সাধারণত প্রস্তাবিত ইভেন্টটি প্রবাহিত হয় না।

Comments

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

— কেআরয়ান

বাতিল করার সময় এটি গুলি চালানো বা অন্যথায় সনাক্তযোগ্য না করা উচিত। এটি কোনও ইউআই সিভেটটি অপসারণের জন্য আরও বোঝানো হয়: ফাইলটি চয়ন করার পরে যদি কিছু পদক্ষেপ নেওয়া হয় তবে ব্যবহারকারী সাধারণত ফাইলটি আবার বেছে নিলে ক্রিয়াটি পুনরাবৃত্তি হওয়ার প্রত্যাশা করে।

— dronus

inputফাইলের সাথে কিছু করার পরে আমরা যদি এর মানটি সেট করে থাকি তবে আমরা এই আচরণ করতে পারি । তবে এটি দৃশ্যমান ফাইলের নামটিও সরিয়ে ফেলবে। তবে, এটি ঠিক আছে কারণ ফাইলটি আসলে প্রক্রিয়াজাত হয় এবং সেই ক্রিয়াটির ফলাফল অন্য কোথাও উপস্থিত হতে পারে।

— dronus

আপনি কি করতে চান কি প্লাজ ব্যাখ্যা করুন?

— চ্যাম্প

আমি যা চাই তা পুরানো স্কুল আচরণ ডেস্কটপ অ্যাপ্লিকেশনগুলির অনুকরণ করা ulate যদি আমি একই ফাইলটি আবার ডেস্কটপ অ্যাপ্লিকেশনটিতে 'ওপেন' করি তবে এটি সাধারণত পুনরায় লোড করা হয়, বা যদি ফাইলের সাথে কিছু ক্রিয়া করা হয় (উদাহরণস্বরূপ এটির অন্য রূপায়ণ রূপান্তর করার মতো) এই ক্রিয়াটি আবার করা হয়। ডেস্কটপ ব্যবহারকারীরা কোনও ওয়েব অ্যাপ্লিকেশন থেকেও এটি প্রত্যাশা করতে পারে তবে fileইনপুট onchangeইভেন্টটির সাথে সাদৃশ্য পাওয়া যায় না।

— dronus

Answer 1

মান সেট inputকরতে nullপ্রতিটি onclickইভেন্ট। এটির inputমানটিকে পুনরায় সেট করে এবং onchangeএকই পথটি নির্বাচন করা হলেও ইভেন্টটি ট্রিগার করবে ।

input.onclick = function () {
    this.value = null;
};

input.onchange = function () {
    alert(this.value);
};​

এখানে একটি ডেমো ।

দ্রষ্টব্য: আপনার ফাইলটি 'সি: \ নকলপথ \' দিয়ে উপস্থাপিত হলে এটি স্বাভাবিক। এটি একটি সুরক্ষা বৈশিষ্ট্য যা জাভাস্ক্রিপ্টটিকে ফাইলের পরম পথটি জানার থেকে বিরত রাখে। ব্রাউজারটি এখনও এটি অভ্যন্তরীণভাবে জানে।

Comments

আমি ডেমো চেষ্টা করেছিলাম, তবে (ক্রোম 21 ব্যবহার করে) আমি `C: \ নকলপথ + পেয়ে যাচ্ছি তারপরে আমি যে ফাইলের নামটি বেছে নিয়েছি (পথ বাদে)। সতর্কতা একই ফাইলের প্রতিটি নির্বাচনের উপর প্রদর্শিত হয়।

— জ্যাস্পার ডি ভ্রিজ

@ জ্যাস্পেরদেভরিস এটি একটি সুরক্ষা বৈশিষ্ট্য যা জাভাস্ক্রিপ্টটিকে কোনও ফাইলের পরম পথ জানার থেকে বিরত রাখে। ব্রাউজারটি এখনও অভ্যন্তরীণভাবে পথটি জানে।

— ব্রায়ান উস্তাস

অন্যদিকে, নাল হল <ইনপুট টাইপ = "ফাইল"> এর একমাত্র অনুমোদিত মান। সুতরাং আপনি যদি সেটাকে অপরিজ্ঞাত করে সেট করার চেষ্টা করছেন এবং ব্যতিক্রম পাচ্ছেন তবে এটি কারণ।

— নোয়েল আবরহামস

আপনি যদি কোনও ছোট পরিবর্তন না করেন তবে আইই 11 এ এটি ভালভাবে কাজ করে না: ডেমো ।

এর this.value = nullশেষে রাখা আরও ভাল onchangeকারণ কোনও ইনপুট উপাদান এটি ক্লিক না করে সক্রিয় করা সম্ভব (কীবোর্ড ব্যবহার করে)। আপনার input.filesযদি পরে এটি উল্লেখ করার দরকার হয় তবে আপনি সঞ্চয় করতে পারেন।

— হ্যালসিওন

Answer 2

<form enctype='multipart/form-data'>
    <input onchange="alert(this.value); this.value=null; return false;" type='file'>
    <br>
    <input type='submit' value='Upload'>
</form>

this.value=null; ক্রোমের জন্য শুধুমাত্র প্রয়োজনীয়, ফায়ারফক্স ঠিক ঠিক সাথে কাজ করবে return false;

এখানে একটি ছোট্ট

Comments

সহজ এবং কার্যকর মাত্র সর্বশেষতম আই এবং ক্রোমে পরীক্ষিত এবং একটি কবজির মতো কাজ করে। এটি ভাগ করে নেওয়ার জন্য ধন্যবাদ

— অতুল চৌধুরী চৌধুরী

Answer 3

এই নিবন্ধে, "নির্বাচনের জন্য ফর্ম ইনপুট ব্যবহার করা" শিরোনামে

http://www.html5rocks.com/en/tutorials/file/dndfiles/

<input type="file" id="files" name="files[]" multiple />

<script>
function handleFileSelect(evt) {

    var files = evt.target.files; // FileList object

    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
     // Code to execute for every file selected
    }
    // Code to execute after that

}

document.getElementById('files').addEventListener('change', 
                                                  handleFileSelect, 
                                                  false);
</script>

এটি 'চেঞ্জ'-তে ইভেন্ট শ্রোতাদের যুক্ত করে, তবে আমি এটি পরীক্ষা করেছি এবং এটি যদি একই ফাইলটি চয়ন করে এবং আপনি বাতিল করে নাও তা ট্রিগার করে।

Comments

এই ক্ষেত্রে "পরিবর্তন" এর সম্ভাব্য দ্ব্যর্থক অর্থ বিবেচনা করে, আপনি কি একাধিক ব্রাউজারে এটি ব্যবহার করে দেখেছেন? আপনি ওয়েবে যেমন কোনটিকে চেষ্টা করেছেন তা আপনি উল্লেখ করতে চাইতে পারেন, ব্রাউজারগুলি এই বিষয়গুলি সম্পর্কে সর্বদা conক্যমত্যে থাকে না।

— Thor84no

আপনার পরীক্ষার জন্য আপনি কোন পরিবেশটি ব্যবহার করেন? ক্রোমের সাথে আমার অভিজ্ঞতাটিই আমি প্রশ্নে বলেছিলাম, changeইভেন্টটি কেবল ফাইলের নাম পরিবর্তন করতেই পারে।

— dronus

Answer 4

লক্ষ্য ইনপুটটির মান সাফ করতে অন ক্লিকের ইভেন্টটি ব্যবহার করুন, প্রতিবার ব্যবহারকারী মাঠে ক্লিক করুন। এটি নিশ্চিত করে যে একই ফাইলের জন্য ওনচেঞ্জ ইভেন্টটিও ট্রিগার করা হবে। আমার জন্য কাজ করেছেন :)

onInputClick = (event) => {
    event.target.value = ''
}

<input type="file" onChange={onFileChanged} onClick={onInputClick} />

টাইপস্ক্রিপ্ট ব্যবহার করে

onInputClick = ( event: React.MouseEvent<HTMLInputElement, MouseEvent>) => {
    const element = event.target as HTMLInputElement
    element.value = ''
}

Comments

সমাধানের জন্য ধন্যবাদ।

— দীপক টেকচাঁদানি

Answer 5

সফলভাবে ফাইল লোড হওয়ার পরে আপনি যা কিছু করতে চান তা করুন your আপনার ফাইল প্রসেসিংয়ের সমাপ্তির পরে ফাইল কন্ট্রোলের মান ফাঁকা স্ট্রিংয়ে সেট করুন change উদাহরণস্বরূপ আপনি এই জিনিসটি করতে পারেন এবং কবিতার মতো আমার জন্য কাজ করেছেন

   $('#myFile').change(function () {
       LoadFile("myFile");//function to do processing of file.
       $('#myFile').val('');// set the value to empty of myfile control.
    });

Answer 6

handleChange({target}) {
    const files = target.files
    target.value = ''
}

Comments

আরে এনজিকোর্স! কোড-কেবলমাত্র উত্তরগুলি সমস্যার সমাধান করতে পারে তবে তারা কীভাবে এটি সমাধান করে তা ব্যাখ্যা করলে তারা আরও বেশি কার্যকর। আপনার উত্তর সম্পূর্ণরূপে বোঝার জন্য সম্প্রদায়টির তত্ত্বের পাশাপাশি কোড উভয়ই প্রয়োজন।

— আরবিটি

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

— ডাবল-বীপ

Answer 7

ইনপুটটির 0 র্থ সূচকের মান সাফ করা আমার পক্ষে কাজ করেছিল । দয়া করে নীচের কোডটি ব্যবহার করে দেখুন, আশা করি এটি কার্যকর হবে (AngularJs)।

          scope.onClick = function() {
            input[0].value = "";
                input.click();
            };