Могу ли я открыть диалог с файлом при нажатии на изображение? Кроме того, я хочу отобразить «выбранные файлы» после выбора файла. Кто-нибудь может мне помочь?
Примечание. Я не хочу кнопку «выбрать файл», но хочу, чтобы текст не выделен
<div class="attachment">
<label for="file-input">
<img class="attachmentImage" src="../../../../assets/Notification Panel/Actions icons/attachment.svg"/>
</label>
<input type="file"/>
</div>
0
Akash Nevagi
2 ответа
попробуйте использовать пользовательский входной файл:
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>
У вас может быть невидимое поле ввода для запуска при клике изображения с помощью HTML и jQuery:
$("input[id='input_image']").click(function() {
$("input[id='input_file']").click();
});
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" />
<input type="file" id="input_file" style="display: none" onchange="readURL(this);" />
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.