Диалог открытия файла с изображением вместо кнопки

Question

Могу ли я открыть диалог с файлом при нажатии на изображение? Кроме того, я хочу отобразить «выбранные файлы» после выбора файла. Кто-нибудь может мне помочь?

Примечание. Я не хочу кнопку «выбрать файл», но хочу, чтобы текст не выделен

<div class="attachment">
  <label for="file-input">
    <img class="attachmentImage" src="../../../../assets/Notification Panel/Actions icons/attachment.svg"/>
  </label>
  <input type="file"/>
</div>

javascript html css

0

Akash Nevagi

Answer 1

попробуйте использовать пользовательский входной файл:

 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>

Answer 2

У вас может быть невидимое поле ввода для запуска при клике изображения с помощью 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);" />

Диалог открытия файла с изображением вместо кнопки

2 ответа

Новые вопросы

javascript