আমার কাছে একটি লুকানো ফাইল ইনপুট উপাদান রয়েছে। কোনও বাটনের ক্লিক ইভেন্ট থেকে এর নির্বাচন করা ফাইল ডায়লগ বক্সটি ট্রিগার করা সম্ভব ?
আমার কাছে একটি লুকানো ফাইল ইনপুট উপাদান রয়েছে। কোনও বাটনের ক্লিক ইভেন্ট থেকে এর নির্বাচন করা ফাইল ডায়লগ বক্সটি ট্রিগার করা সম্ভব ?
উত্তর:
যদি আপনি নিজের ফাইলটি ব্যবহারের পরিবর্তে আপলোড <input type="file" />করতে চান তবে আপনি এর মতো কিছু করতে পারেন:
<input id="myInput" type="file" style="visibility:hidden" />
<input type="button" value="Show Dialog" onclick="$('#myInput').click();" />
নোট করুন যে আমি visibility: hiddenপরিবর্তে ব্যবহার করেছি display: none। আপনি ক্লিক ইভেন্টটিকে একটি অ-প্রদর্শিত ফাইল ইনপুটটিতে কল করতে পারবেন না।
click()একটি display:noneইনপুট চেষ্টা করেছি এবং এটি কাজ করেছে
click()করে একটি উপাদান জুড়ে display: none! ;) গত চার বছরে জিনিসগুলি কীভাবে পরিবর্তিত হয়েছে।
hiddenপরিবর্তে আপনি বৈশিষ্ট্যটি ব্যবহার করতে পারেন style="visibility:hidden": <input id="myInput" type="file" hidden>( w3schools.com/tags/att_global_hided.asp )
এখানে বেশিরভাগ উত্তরের একটি দরকারী তথ্যের অভাব রয়েছে:
হ্যাঁ, আপনি jQuery / জাভাস্ক্রিপ্ট ব্যবহার করে প্রোগ্রামগতভাবে ইনপুট উপাদানটি ক্লিক করতে পারেন, তবে কেবলমাত্র আপনি যদি এটি ব্যবহারকারীর দ্বারা শুরু করা হয়েছিল এমন কোনও ইভেন্টের অন্তর্গত ইভেন্ট হ্যান্ডেলারটিতে করেন!
সুতরাং, উদাহরণস্বরূপ, যদি আপনি, স্ক্রিপ্টটি প্রোগ্রামালিভাবে একটি অজ্যাক্স কলব্যাকের বোতামটি ক্লিক করেন তবে কিছুই ঘটবে না, তবে আপনি যদি কোনও ইভেন্ট হ্যান্ডলারটিতে একই কোডের লাইনটি ব্যবহারকারী দ্বারা উত্থাপিত করেন তবে এটি কার্যকর হবে।
পিএস debugger;কীওয়ার্ডটি ব্রাউজ উইন্ডোটিকে যদি প্রোগ্রামমেটিকাল ক্লিকের আগে হয় বাধা দেয় ... কমপক্ষে ক্রোম 33 এ ...
$(staticElementParent).on("click", "dynamicChild", function(){})
debugger;কীওয়ার্ডটি আর প্রোগ্রামিমেট ক্লিককে বাধা দেয় না
কেবল রেকর্ডের জন্য, একটি বিকল্প সমাধান রয়েছে যার জন্য জাভাস্ক্রিপ্টের প্রয়োজন নেই। এটি একটি হ্যাকের সামান্য বিষয়, কোনও লেবেলে ক্লিক করা সম্পর্কিত ইনপুটটিতে ফোকাস সেট করে এই সত্যটি কাজে লাগিয়ে।
আপনার <label>একটি যথাযথ forবৈশিষ্ট্যযুক্ত (ইনপুটটির দিকে নির্দেশ করা), বাটনের মতো বিকল্পশালী স্টাইলযুক্ত (বুটস্ট্র্যাপ সহ, ব্যবহার btn btn-default) দরকার। যখন ব্যবহারকারী লেবেলে ক্লিক করেন, ডায়ালগটি খোলে, উদাহরণস্বরূপ:
<!-- optionnal, to add a bit of style -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<!-- minimal setup -->
<label for="exampleInput" class="btn btn-default">
Click me
</label>
<input type="file" id="exampleInput" style="display: none" />আমি নিশ্চিত নই যে ব্রাউজারগুলি কীভাবে type="file"উপাদানগুলিতে ক্লিক করে (সুরক্ষা উদ্বেগ এবং সমস্ত), কিন্তু এটিতে কাজ করা উচিত:
$('input[type="file"]').click();
আমি এই জেএসফিডালটি ক্রোম, ফায়ারফক্স এবং অপেরাতে পরীক্ষা করেছি এবং তারা সকলেই ফাইল ব্রাউজ ডায়ালগটি দেখায়।
আমি input[type=file]লেবেল ট্যাগগুলিতে মোড়কে রাখি , তারপরে labelআপনার পছন্দ অনুসারে স্টাইল করুন এবং লক করুন input।
<label class="btn btn-default fileLabel" data-toggle="tooltip" data-placement="top" title="Upload">
<input type="file">
<span><i class="fa fa-upload"></i></span>
</label>
<style>
.fileLabel input[type="file"] {
position: fixed;
top: -1000px;
}
</style>
খাঁটি সিএসএস সলিউশন।
<input type="file" hidden>একটি সিএসএস শৈলী প্রয়োগ করার প্রয়োজন সবেমাত্র সেট করে set
স্থানীয়ভাবে একমাত্র উপায় হ'ল একটি <input type="file">উপাদান তৈরি করা এবং তারপরে দুর্ভাগ্যক্রমে ক্লিক ক্লিক করে।
একটি ক্ষুদ্র প্লাগইন রয়েছে (নির্লজ্জ প্লাগ) যা ব্যথাটি সর্বদা এটি করার জন্য দূরে সরিয়ে ফেলবে: ফাইল-সংলাপ
fileDialog()
.then(file => {
const data = new FormData()
data.append('file', file[0])
data.append('imageName', 'flower')
// Post to server
fetch('/uploadImage', {
method: 'POST',
body: data
})
})
সর্বোত্তম সমাধান, সমস্ত ব্রাউজারে .. এমনকি মোবাইলেও কাজ করে।
<div class="btn" id="s_photo">Upload</div>
<input type="file" name="s_file" id="s_file" style="opacity: 0;">';
<!--jquery-->
<script>
$("#s_photo").click(function() {
$("#s_file").trigger("click");
});
</script>
ইনপুট ফাইলের ধরণটি ব্রাউজারগুলিতে সমস্যা দেখা দেয়, অস্বচ্ছতা হ'ল সর্বোত্তম সমাধান কারণ এটি লুকিয়ে নেই, কেবল প্রদর্শিত হচ্ছে না। :)
visibility:hiddenআরও ভাল পছন্দ হওয়া উচিত।
visibility: hiddenএখনও লেআউট প্রভাবিত করে। display: noneআপনি কি চান
সুরক্ষার কারণে কোনও ক্রস ব্রাউজার করার উপায় নেই। লোকেরা সাধারণত যা করে তা হ'ল ইনপুট ফাইলটিকে অন্য কোনও কিছুর উপরে ওভারলে করে এবং এর দৃশ্যমানতাটি লুকানোতে সেট করে যাতে এটি নিজেরাই ট্রিগার হয়। আরও তথ্য এখানে।
<input type="file">, না <select>।
$.click()।
আপনি REACT তে উপাদান প্রপস পেতে বাঁধাই ব্যবহার করছেন তা নিশ্চিত করুন
class FileUploader extends Component {
constructor (props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
onChange=(e,props)=>{
const files = e.target.files;
const selectedFile = files[0];
ProcessFileUpload(selectedFile,props.ProgressCallBack,props.ErrorCallBack,props.CompleatedCallBack,props.BaseURL,props.Location,props.FilesAllowed);
}
handleClick = () => {
this.refs.fileUploader.click();
}
render()
{
return(
<div>
<button type="button" onClick={this.handleClick}>Select File</button>
<input type='file' onChange={(e)=>this.onChange(e,this.props)} ref="fileUploader" style={{display:"none"}} />
</div>)
}
}
যারা একই চান তবে তাদের ব্যবহার করুন প্রতিক্রিয়া
openFileInput = () => {
this.fileInput.click()
}
<a href="#" onClick={this.openFileInput}>
<p>Carregue sua foto de perfil</p>
<img src={img} />
</a>
<input style={{display:'none'}} ref={(input) => { this.fileInput = input; }} type="file"/>
<div id="uploadButton">UPLOAD</div>
<form action="[FILE_HANDLER_URL]" style="display:none">
<input id="myInput" type="file" />
</form>
<script>
const uploadButton = document.getElementById('uploadButton');
const myInput = document.getElementById('myInput');
uploadButton.addEventListener('click', () => {
myInput.click();
});
</script>