Могу ли я открыть диалоговое окно файла при нажатии на изображение? Кроме того, я хочу отображать «выбранные файлы» после выбора файла. Кто-нибудь может мне помочь?
Примечание. Мне не нужна кнопка «выбрать файл», но я хочу, чтобы текст «не выделен ни один элемент»
<div class="attachment">
<label for="file-input">
<img class="attachmentImage" src="../../../../assets/Notification Panel/Actions icons/attachment.svg"/>
</label>
<input type="file"/>
</div>
2 ответа
У вас может быть невидимое поле ввода, которое запускается при щелчке изображения с помощью HTML и jQuery:
$("input[id='input_image']").click(function() {
$("input[id='input_file']").click();
});
// jQuery Solution for Showing Uploaded Image
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#input_image')
.attr('src', e.target.result);
};
reader.readAsDataURL(input.files[0]);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="image" id="input_image" src="http://upload.wikimedia.org/wikipedia/commons/c/ca/Button-Lightblue.svg" width="30px" />
<!-- onchange="readURL(this);" is for jQuery Solution for Showing Uploaded Image-->
<input type="file" id="input_file" style="display: none" onchange="readURL(this);" />
высота и width устанавливаются в зависимости от размера кнопки. Чтобы изменить длину, вы можете установить ее с помощью jQuery.
Попробуйте использовать собственный входной файл:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#profile-img-tag').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#file").change(function(){
readURL(this);
});
<input type="file" class="form-control" id="file" placeholder="Enter Your Password" name="files" value="files" style="display: none;">
<label class="upload_photo" for="file" style="background-color: red; padding: 20px; border-radius: 50%;"></label>
<img src="" id="profile-img-tag" width="200px" />
</div>
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript/JS) и его различных диалектах/реализациях (кроме ActionScript). Обратите внимание, что JavaScript — это НЕ Java. Включите все теги, относящиеся к вашему вопросу: например, [node.js], [jQuery], [JSON], [ReactJS], [angular], [ember.js], [vue.js], [typescript], [стройный] и т. д.