import java.io.BufferedWriter; импортировать java.io.FileWriter; import java.io.IOException; import java.io.PrintWriter; public class Writer {public static void main (String args []) {doWrite ("output.txt", "Содержимое для добавления в файл"); } public static void doWrite (String filePath, String contentToBeAppended) {try (FileWriter fw = new FileWriter (filePath, true); BufferedWriter bw = new BufferedWriter (fw); PrintWriter out = new PrintWriter (bw)) {out.println (contentToBeAppended ); } catch (IOException e) {// Запись / открытие файла на каком-то этапе. }}}
Если вы хотите иметь свою собственную кнопку для загрузки файла вместо использования <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()
.
– Bojangles
21 December 2011 в 21:54
Натурально единственный способ - создать элемент <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
})
})
Я не уверен, как браузеры обрабатывают клики по элементам type="file"
(проблемы безопасности и все), но это должно работать:
$('input[type="file"]').click();
Я протестировал этот JSFiddle в Chrome, Firefox и Opera, и все они показывают диалог просмотра файлов.
hover
: jsfiddle.net/UQfaZ/1
– Louis B.
25 February 2013 в 22:20
В большинстве ответов отсутствует полезная информация:
Да, вы можете программным образом щелкнуть элемент ввода с помощью jQuery / JavaScript, но только если вы сделаете это в обработчике событий, принадлежащем событию, которое НАЧАЛОСЬ ПОЛЬЗОВАТЕЛЕМ!
Итак, например, ничего не произойдет, если вы, сценарий, программно нажмите кнопку в обратном вызове ajax, но если вы поместите ту же строку кода в обработчик события, который был поднят пользователь будет работать.
PS Ключевое слово debugger;
нарушает окно просмотра, если оно находится перед программным щелчком ... по крайней мере, в хроме 33 ...
$(staticElementParent).on("click", "dynamicChild", function(){})
– Daniel Cheung
27 June 2015 в 12:47
Лучшее решение работает во всех браузерах .. даже на мобильных устройствах.
<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
должен быть лучшим выбором.
– conny
23 June 2015 в 07:03
visibility: hidden
все еще влияет на макет. display: none
- это то, что вы хотите.
– Jop V.
13 September 2016 в 11:15
Убедитесь, что вы используете привязку, чтобы получить компонентные реквизиты в 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>)
}
}
Только для записи есть альтернативное решение, которое не требует javascript.
Вам нужен <label>
с соответствующим атрибутом for
(указывает на ввод) , optionnaly, как кнопка (с бутстрапом, используйте 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" />
Используя jQuery, вы можете вызвать 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>
Чисто CSS-решение.
Для тех, кто хочет того же, но использует React
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"/>
click()
на входеdisplay:none
, и он работал – Daniel Cheung 27 June 2015 в 12:44click()
на элементе сdisplay: none
работает! ;) Как все изменилось за последние четыре года. – ffxsam 26 November 2015 в 06:41