Как просмотреть img src javascript

Вот что мне нужно сделать. Так у меня есть этот кодКак просмотреть img src javascript

<input type="file" id="uploadImage" name="image" /> 
    <input type="submit" id="ImageName" name="submit" value="Submit">

Так что, когда я нажмите кнопку «Выбрать ..», чтобы просмотреть изображение, я хочу, чтобы путь этого изображения, которое будет сохранено в переменной.

Или в основном то, что мне нужно сделать, - это сделать этот путь как src изображения.

$('#Imageholder').append('<img src="" class="ImgCoords" >');

Любые идеи?

К сожалению, если объяснение плохо:

источник

2013-09-25 Kiril Velichkov

Итак, вы хотите, чтобы пользователь, чтобы выбрать изображение со своего компьютера, а затем отображать его на экране? –

Возможно, вы можете проверить спецификации w3c для этого: http://www.w3.org/TR/2012/WD-html5-20121025/the-input-element.html#dom-input-src: 'attribute DOMString src; ' – AvL

Что-то вроде этого: http://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded –

Если вы используете HTML5, вы можете.

Смотрите здесь File API. по W3C

В приведенной ниже ключевой линии от API

var file = document.getElementById('file').files[0];

Но если вы не используете HTML5

По соображениям безопасности вы не можете сделать that.html не имеет доступа к информации о файловой системе.

может быть полезным: Preview an image before it is uploaded

источник

2013-09-25 15:03:56

Спасибо миллиону Юрию Галантеру, который работал префект! @Suresh ATTA - Я знаю по соображениям безопасности спасибо за ваше время :) –

Как это сделать SURESH? –

Спасибо, Суреш, но ответ не представлен таким образом. Решение - это то, что сказал Юрий Галантер в комментарии. Он дал мне ссылку, и решение находится внутри ссылки. –

Вот пример того, что я сделал, адаптировать его к необходимости:

DEMO HERE

Я добавил кнопку удалить загруженный файл, если вы этого не сделаете как показать/скрыть эффект просто удалить slow, изображение показывается только при загрузке:

$('#blah').hide(); 
$('#remove').hide(); 
function readURL(input) { 
     if (input.files && input.files[0]) { 
      var reader = new FileReader(); 

      reader.onload = function (e) { 
       $('#blah').attr('src', e.target.result); 
      } 

      reader.readAsDataURL(input.files[0]); 
     } 
    } 

    $("#imgInp").change(function(){ 
     if($('#imgInp').val()!=""){ 

      $('#remove').show(); 
      $('#blah').show('slow'); 
     } 
     else{ $('#remove').hide();$('#blah').hide('slow');} 
     readURL(this); 
    }); 


    $('#remove').click(function(){ 
      $('#imgInp').val(''); 
      $(this).hide(); 
      $('#blah').hide('slow'); 
      $('#blah').attr('src','http://upload.wikimedia.org/wikipedia/commons/thumb/4/40/No_pub.svg/150px-No_pub.svg.png'); 
});

HTML код:

<form id="form1"> 
    <input type='file' id="imgInp" name='image'/> 
    <img id="blah" src="#" alt="your image" /> 
</form>

источник

2013-09-25 15:06:20

Как просмотреть img src javascript

ответ

Смежные вопросы