যখন ব্যবহারকারী কোনও ফাইল নির্বাচন করেন আমি কোনও ইভেন্টে গুলি চালাতে চাই। .changeইভেন্টের সাথে এটি করা ব্যবহারকারীর প্রতিবার ফাইল পরিবর্তন করলে এটি কাজ করে।
তবে ব্যবহারকারী যদি একই ফাইলটি আবার নির্বাচন করে তবে আমি ইভেন্টটি ফায়ার করতে চাই।
A.jpg(ইভেন্ট অগ্নি)B.jpg(ইভেন্ট অগ্নি)B.jpg(ইভেন্টটি আগুন দেয় না, আমি এটি ফায়ার করতে চাই)আমি এটা কিভাবে করবো?
উত্তর:
আপনি এটি কৌতুক করতে পারেন। ফাইলের উপাদানটি সরান এবং changeইভেন্টে একই জায়গায় যুক্ত করুন । এটি প্রতিবার পরিবর্তনযোগ্য হিসাবে তৈরি করে ফাইলের পাথ মুছে ফেলবে।
অথবা আপনি সহজভাবে ব্যবহার করতে পারেন .prop("value", ""), jsFizz এ এই উদাহরণটি দেখুন ।
propattr.attr("value", "")বা .val("")(যেমন নীচে @ ওয়াগনার-লিওনার্ডির পরামর্শে) ইন্টারনেট এক্সপ্লোরার ক্রোমটি না করার সময় পরিবর্তনের ইভেন্টটিকে আগুন ধরিয়ে দেবে
.prop("value", "")
আপনি যদি চেষ্টা .attr("value", "")করেও কাজ না করে থাকেন তবে আতঙ্কিত হবেন না (যেমন আমি করেছি)
কেবল .val("")পরিবর্তে করুন, এবং ভাল কাজ করবে
ব্যবহারকারীরা প্রতিটি সময় নিয়ন্ত্রণে ক্লিক করলে আপনি কেবল ফাইলের পথটি বাতিল করতে পারেন ull এখন, ব্যবহারকারী একই ফাইলটি নির্বাচন করা সত্ত্বেও, অনুরুপ ইভেন্টটি ট্রিগার করা হবে।
<input id="file" onchange="file_changed(this)" onclick="this.value=null;" type="file" accept="*/*" />লক্ষ্য ইনপুটটির মান সাফ করতে অন ক্লিকের ইভেন্টটি ব্যবহার করুন, প্রতিবার ব্যবহারকারী মাঠে ক্লিক করুন। এটি নিশ্চিত করে যে একই ফাইলের জন্য ওনচেঞ্জ ইভেন্টটিও ট্রিগার করা হবে। আমার জন্য কাজ করেছেন :)
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 = ''
}আমি ক্লিক করে ফাইল ইনপুট মানটি অন ক্লিকে সাফ করে এবং তারপরে ফাইলটি চেঞ্জ করে কাজ করতে পেরেছি। এটি ব্যবহারকারীকে পর পর দুবার একই ফাইলটি নির্বাচন করতে দেয় এবং তারপরেও সার্ভারে পোস্ট করার জন্য পরিবর্তন ইভেন্টের আগুন থাকে। আমার উদাহরণ jQuery ফর্ম প্লাগইন ব্যবহার করে ।
$('input[type=file]').click(function(){
$(this).attr("value", "");
})
$('input[type=file]').change(function(){
$('#my-form').ajaxSubmit(options);
})onClickআগে আগুন জ্বলে onChange, তাই এই পদ্ধতিটি আমার পক্ষে দুর্দান্ত কাজ করে।
আমার জন্য এই কাজ
<input type="file" onchange="function();this.value=null;return false;">VueJs সমাধান
<input
type="file"
style="display: none;"
ref="fileInput"
accept="*"
@change="onFilePicked"
@click="$refs.fileInput.value=null"
>@ ব্রায়েচ থেকে অনুপ্রেরণা আমি নিম্নলিখিতটি আমার AngularJS2 এ ব্যবহার করেছি in input-file-component
<input id="file" onclick="onClick($event) onchange="onChange($event)" type="file" accept="*/*" />
export class InputFile {
@Input()
file:File|Blob;
@Output()
fileChange = new EventEmitter();
onClick(event) {
event.target.value=''
}
onChange(e){
let files = e.target.files;
if(files.length){
this.file = files[0];
}
else { this.file = null}
this.fileChange.emit(this.file);
}
}এখানে onClick(event)আমাকে উদ্ধার :-)
আপনি jQuery ব্যবহার করতে না চাইলে
<form enctype='multipart/form-data'>
<input onchange="alert(this.value); return false;" type='file'>
<br>
<input type='submit' value='Upload'>
</form>এটি ফায়ারফক্সে দুর্দান্ত কাজ করে তবে ক্রোমের জন্য আপনাকে this.value=null;সতর্কতার পরে যুক্ত করা দরকার ।
ডিফল্টরূপে, ইনপুটটির একাধিক বৈশিষ্ট্য থাকলে ইনপুট উপাদানগুলির মান সম্পত্তি ফাইল নির্বাচনের পরে সাফ হয়ে যায়। আপনি যদি এই সম্পত্তিটি পরিষ্কার না করেন তবে আপনি একই ফাইলটি নির্বাচন করলে "পরিবর্তন" ইভেন্টটি বরখাস্ত করা হবে না। আপনি multipleগুণাবলী ব্যবহার করে এই আচরণটি পরিচালনা করতে পারেন ।
<!-- will be cleared -->
<input type="file" onchange="yourFunction()" multiple/>
<!-- won't be cleared -->
<input type="file" onchange="yourFunction()"/>আপনি changeএখানে আগুন জ্বালাতে পারবেন না (সঠিক আচরণ, যেহেতু কিছুই পরিবর্তিত হয়নি)। যাইহোক, আপনি clickপাশাপাশি বাঁধতে পারেন ... যদিও এটি খুব ঘন ঘন আগুন লাগতে পারে ... যদিও এই দুইয়ের মধ্যে খুব বেশি মাঝারি ক্ষেত্র নেই।
$("#fileID").bind("click change", function() {
//do stuff
});.click()"পুনরায় নির্বাচনের ক্ষেত্রে আগুন" নন।
clickযতটা কাছে যায় তত কাছাকাছি।
ইনপুটটির জন্য একটি ক্লিক ইভেন্ট এবং একটি পরিবর্তন ইভেন্ট তৈরি করুন। ক্লিক ইভেন্টটি ইনপুটটি খালি করে দেয় এবং পরিবর্তিত ইভেন্টে আপনি কার্যকর করতে চান এমন কোডটি থাকে।
সুতরাং আপনি যখন ইনপুট বোতামটি ক্লিক করবেন (ক্লিক করুন ফাইল উইন্ডোজ খোলার আগে) ক্লিক করুন ইভেন্টটি খালি হয়ে যাবে, এরপরে আপনি যখন কোনও ফাইল নির্বাচন করবেন তখন পরিবর্তন ইভেন্টটি সর্বদা ট্রিগার হবে।
$("#input").click(function() {
$("#input").val("")
});
$("#input").change(function() {
//Your code you want to execute!
});<input id="input" type="file">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>আপনি form.reset()ফাইল ইনপুট এর filesতালিকা সাফ করতে ব্যবহার করতে পারেন । এটি সমস্ত ক্ষেত্রকে ডিফল্ট মানগুলিতে পুনরায় সেট করবে, তবে অনেক ক্ষেত্রে আপনি যেভাবেই ফাইল আপলোড করতে কোনও ফর্মের ইনপুট টাইপ = 'ফাইল' ব্যবহার করতে পারেন may এই সমাধানে উপাদানটি ক্লোন করার দরকার নেই এবং ইভেন্টগুলিকে আবার হুক করতে হবে।
ফিলিপ্লেহম্যানকে ধন্যবাদ
আমি একই সমস্যার মধ্যে দৌড়েছি, আমি তার উপরের সমাধানগুলির মাধ্যমে লাল হয়েছি তবে কী ঘটছে তা তারা কোনও ভাল ব্যাখ্যা পায়নি।
এই সমাধানটি আমি https://jsfiddle.net/r2wjp6u8/ লিখেছি ডোম ট্রিতে অনেক পরিবর্তন করে না, এটি কেবল ইনপুট ক্ষেত্রের মান পরিবর্তন করে। পারফরম্যান্স দিক থেকে এটি আরও ভাল হওয়া উচিত।
ফিডল এর লিঙ্ক: https://jsfiddle.net/r2wjp6u8/
<button id="btnSelectFile">Upload</button>
<!-- Not displaying the Inputfield because the design changes on each browser -->
<input type="file" id="fileInput" style="display: none;">
<p>
Current File: <span id="currentFile"></span>
</p>
<hr>
<div class="log"></div>
<script>
// Get Logging Element
var log = document.querySelector('.log');
// Load the file input element.
var inputElement = document.getElementById('fileInput');
inputElement.addEventListener('change', currentFile);
// Add Click behavior to button
document.getElementById('btnSelectFile').addEventListener('click', selectFile);
function selectFile() {
if (inputElement.files[0]) {
// Check how manyf iles are selected and display filename
log.innerHTML += '<p>Total files: ' + inputElement.files.length + '</p>'
// Reset the Input Field
log.innerHTML += '<p>Removing file: ' + inputElement.files[0].name + '</p>'
inputElement.value = '';
// Check how manyf iles are selected and display filename
log.innerHTML += '<p>Total files: ' + inputElement.files.length + '</p>'
log.innerHTML += '<hr>'
}
// Once we have a clean slide, open fiel select dialog.
inputElement.click();
};
function currentFile() {
// If Input Element has a file
if (inputElement.files[0]) {
document.getElementById('currentFile').innerHTML = inputElement.files[0].name;
}
}
</scrip>সুতরাং, যদি আপনি প্রতিটি ফাইল সঞ্চয় না করে এবং প্রোগ্রামগতভাবে তাদের তুলনা করেন তবে 100% এর কোনও উপায় নেই যে তারা একই ফাইলটি নির্বাচন করছে তা নিশ্চিত হওয়ার উপায় নেই।
আপনি ফাইলগুলির সাথে যেভাবে ইন্টারঅ্যাক্ট করেন (ব্যবহারকারী যখন কোনও ফাইল আপলোড করেন তখন জেএস কী করে) হ'ল HTML5 ফাইল এপিআই এবং জেএস ফাইলরেডার ।
https://www.html5rocks.com/en/tutorials/file/dndfiles/
https://scotch.io/tutorials/use-the-html5-file-api-to-work-with-files-locally-in-the-browser
এই টিউটোরিয়ালগুলি আপনাকে কোনও ফাইল আপলোড করার সময় কীভাবে মেটাডেটা (js অবজেক্ট হিসাবে সঞ্চিত) ক্যাপচার এবং পড়তে হয় তা দেখায়।
এমন একটি ফাংশন তৈরি করুন যা 'onChange' গুলি চালায় যা পড়বে-> স্টোর-> আগের ফাইলগুলির সাথে বর্তমান ফাইলের মেটাডেটার তুলনা করবে। তারপরে পছন্দসই ফাইলটি নির্বাচন করা হলে আপনি আপনার ইভেন্টটি ট্রিগার করতে পারেন।
বিশ্বাস করুন, এটি অবশ্যই আপনাকে সাহায্য করবে!
// there I have called two `onchange event functions` due to some different scenario processing.
<input type="file" class="selectImagesHandlerDialog"
name="selectImagesHandlerDialog"
onclick="this.value=null;" accept="image/x-png,image/gif,image/jpeg" multiple
onchange="delegateMultipleFilesSelectionAndOpen(event); disposeMultipleFilesSelections(this);" />
// delegating multiple files select and open
var delegateMultipleFilesSelectionAndOpen = function (evt) {
if (!evt.target.files) return;
var selectedPhotos = evt.target.files;
// some continuous source
};
// explicitly removing file input value memory cache
var disposeMultipleFilesSelections = function () {
this.val = null;
};আশা করি এটি আপনার অনেককে সহায়তা করবে।