Question

是否可以使用jquery和html FORM元素将计算机中的图像插入div？

我做了类似这样的事情，将文本节点插入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的id为“rightcolumn”，那么您可以插入图像的方式与插入p元素的方式相同：

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

这假设my_image_file.jpg位于与网页本身相同的计算和目录中。如果不是这种情况，请在计算机上为src属性指定图像文件的完整URL。

<强>更新

要获取图片的本地网址，假设通过file网址而不是http网址访问HTML，您可能会出现以下内容：

在表单中添加类型为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);

请注意，如果您已从本地文件系统而不是通过Web服务器（甚至是本地Web服务器）打开网页，则此方法将仅跨浏览器工作。出于安全原因，大多数浏览器不允许来自Web服务器的网页获取本地文件名的完整路径。如果您从http网址打开网页，则$("img_input").val()通常只返回文件名，而不是完整路径。

我不知道任何可靠的跨浏览器技术来自从Web服务器加载的网页的本地文件的完整路径。

Answer 2

您通常需要将图像上传到服务器才能在页面中查看图像。有些浏览器会支持您想要的内容，而无需使用html5中的构造进行上传，但上传可能是您现在最好的选择。

Answer 3

使用此jquery从TEXTBOX获取iMAGE URL：

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

});

Answer 4

在页面中放置<div>并将其id设置为唯一的内容，例如targetdivid
将imageurl保存为JavaScript数组，例如imageurls

最后应用以下技术

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

如何使用form和jquery将图像插入div

4 个答案: