मेरे पास एक छिपा हुआ फ़ाइल इनपुट तत्व है। क्या बटन के क्लिक इवेंट से इसके चुनिंदा फ़ाइल डायलॉग बॉक्स को ट्रिगर करना संभव है ?
मेरे पास एक छिपा हुआ फ़ाइल इनपुट तत्व है। क्या बटन के क्लिक इवेंट से इसके चुनिंदा फ़ाइल डायलॉग बॉक्स को ट्रिगर करना संभव है ?
जवाबों:
यदि आप उपयोग करने के बजाय फ़ाइल अपलोड करने के लिए अपना स्वयं का बटन देख रहे हैं <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_hidden.asp )
यहां अधिकांश उत्तरों में एक उपयोगी जानकारी का अभाव है:
हां, आप प्रोग्राम को jQuery / जावास्क्रिप्ट का उपयोग करके इनपुट तत्व पर क्लिक कर सकते हैं, लेकिन केवल तभी जब आप इसे किसी इवेंट हैंडलर में करते हैं, जो कि USER द्वारा शुरू किया गया था!
इसलिए, उदाहरण के लिए, यदि आप, स्क्रिप्ट, प्रोग्राम अनजैक्स कॉलबैक में बटन पर क्लिक करते हैं, तो कुछ भी नहीं होगा, लेकिन यदि आप एक इवेंट हैंडलर में कोड की एक ही लाइन डालते हैं जो उपयोगकर्ता द्वारा उठाया गया था, तो यह काम करेगा।
PS 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();मैंने इस JSFiddle को क्रोम, फ़ायरफ़ॉक्स और ओपेरा में परीक्षण किया है और वे सभी फ़ाइल ब्राउज़ संवाद दिखाते हैं।
hoverघटना के आधार पर फ़ाइल संवाद को खोलना संभव नहीं लगता : jsfiddle.net/UQfaZ/1
मैं 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>सीएसएस शैली लागू करने की आवश्यकता को दूर करने के लिए बस सेट करें।
मूल रूप से एक <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>