Как вставить изображение в div, используя форму и jquery

Question

Можно ли вставить изображение с моего компьютера в элемент div, используя элемент FORM jquery и html?

Я делаю что-то подобное, чтобы вставить текстовые узлы в элемент div:

HTML

<form>
  <div><input type="text"  id="text" ></div>
  <div><input type="button" value="Add" onclick="append()" /></div>
</form>

Javascript

function append() {
  var value = $('#text').val();
  $('#rightcolumn').append('<p>'+value+'</p>');
}

Answer 1

Вы не указываете ничего о div в своем примере кода, а просто предполагаете, что div имеет идентификатор "rightcolumn", тогда вы можете вставить изображение так же, как вы вставляете элемент p:

$("#rightcolumn").append("img").prop("src", "my_image_file.jpg");

Предполагается, что my_image_file.jpg находится на том же компьютере и в том же каталоге, что и сама веб-страница.Если это не так, укажите полный URL-адрес файла изображения на вашем компьютере для свойства src.

---

Обновление

Чтобы получить локальныйURL для изображения, при условии, что доступ к HTML осуществляется через URL file, а не через URL http, вы можете сделать что-то вроде следующего.

Добавить поле ввода типа file в вашу форму:

<label for="img_input">Select an image file:</label>
<input id="img_input" name="img_input" type="file" />

Добавьте этот код к вашей функции append:

var imgUrl = $("img_input").val();
$("#rightcolumn").append("img").prop("src", imgUrl);

Обратите внимание, что этот подход будет только работать кросс-браузер, если вы открыливеб-страница из локальной файловой системы, а не через веб-сервер (даже локальный веб-сервер).По соображениям безопасности большинство браузеров не позволяют веб-странице, полученной с веб-сервера, получить полный путь к локальному имени файла.Если вы открыли веб-страницу по URL-адресу http, то $("img_input").val() обычно возвращает только имя файла, а не полный путь.

Я не знаю какой-либо надежной кросс-браузерной техники для полного путилокального файла с веб-страницы, загруженной с веб-сервера.

Answer 2

используйте этот jquery, чтобы получить URL-адрес изображения из текстового поля:

$("#YourBtnToshowImageID").click(function () {
    var imgurl=($("#YourImageUrlTextBox").val());
$("#YourDivUrl").append("img").prop("src", imgurl);

});

Answer 3

Обычно вам необходимо загрузить изображение на сервер, чтобы просмотреть изображение на вашей странице.Есть некоторые браузеры, которые поддерживают то, что вы хотите, без загрузки с использованием конструкций из html5, но загрузка, вероятно, является лучшим выбором на данный момент.

Answer 4

Поместите <div> на страницу и установите для id нечто уникальное, например targetdivid
Сохранить imageurl в виде массива JavaScript, например imageurls

Наконец примените следующую технику

$.each(imageurls,function(i,url){$("<img/>").attr("src",url).appendTo("#targetdivid")});