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

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 23 Окт 2019 в 14:58

Answer 1

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

1

4424dev 26 Фев 2020 в 17:48

Спасибо за ваше решение, но я не вижу выбранное изображение.

–

Akash Nevagi

23 Окт 2019 в 15:34

1

Извините, я добавил решение jQuery.

–

4424dev

23 Окт 2019 в 15:50

Вы можете установить размер изображения на заданный размер с помощью jQuery или размер изображения по умолчанию HEIGHT WIDTH

–

4424dev

28 Окт 2019 в 15:55

Answer 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>

1

Sfili_81 23 Окт 2019 в 16:20

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

2 ответа

Похожие вопросы

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

javascript