По клику добавить изоображение

204
15 марта 2019, 16:50

Ребят всем привет. У меня есть инпут, который добавляет изоображение. Но мне это надо сделать по клику. Как это сделать. Помогите пожалуйста

function readURL(input) { 
        if (input.files && input.files[0]) { 
            var reader = new FileReader(); 
 
            reader.onload = function (e) { 
              var dragClass = " ui-widget-content"; 
            var srcImg = ""; 
            var imgId = "image_upload_preview"; 
            var img = $("<img class="+dragClass+" id="+imgId+" src="+srcImg+">"); 
                img.attr('src', e.target.result); 
                  $("body").append(img); 
            } 
 
            reader.readAsDataURL(input.files[0]); 
        } 
    } 
 
 
    function addImage(file) { 
      this.file = $("#file"); 
        readURL(this.file); 
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input type="file" name="filename" id="file"> 
 
        
        <button type="button" id="add-image" class="btn-insert-txt" onclick="addImage()">Добавить изоображение</button>

Answer 1

function readURL(input) { 
  if (input.files && input.files[0]) { 
    var reader = new FileReader(); 
 
    reader.onload = function(e) { 
      var dragClass = " ui-widget-content"; 
      var srcImg = ""; 
      var imgId = "image_upload_preview"; 
      var img = $("<img class=" + dragClass + " id=" + imgId + " src=" + srcImg + ">"); 
      img.attr('src', e.target.result); 
      $("body").append(img); 
    } 
 
    reader.readAsDataURL(input.files[0]); 
  } 
} 
 
function addImage(file) { 
  readURL($("#file")[0]); 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input type="file" name="filename" id="file"> 
 
 
<button type="button" id="add-image" class="btn-insert-txt" onclick="addImage()">Добавить изоображение</button>

READ ALSO
Как добавить кастомные маркеры к карте OSM?

Как добавить кастомные маркеры к карте OSM?

В картах OSM я новичок, саму карту получилось сгенерировать на javascript, но нужно добавить маркеры к населенным пунктам на карту, читала, что это...

147
Отображение всех данных через class

Отображение всех данных через class

Объявленные в js сотрудники должны появляться в HTML все один за одним, а отображается только последний

165
event.preventDefault() не работает в Firefox

event.preventDefault() не работает в Firefox

С помощью стрелок на клавиатуре нужно перемещать фокус по ряду селектовЧтобы избежать смены options при перемещении по селектам применяется...

146
Невыполненые обещания JS

Невыполненые обещания JS

Если постоянно не выполнять обещания в js, ни reject, ни resolve, то будут ли утечки памяти?

154