如何插入图像到div使用窗体和jQuery的

是否有可能从我的电脑插入图像到div使用jQuery和HTML FORM元素？如何插入图像到div使用窗体和jQuery的

我做出这样的事情来插入文本节点到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>'); 
}

来源

2012-01-07 Michał Lach

通常你需要为了把图片上传到服务器在你的页面中查看图像。有一些浏览器可以支持你想要的内容，而无需使用html5的结构进行上传，但上传可能是你现在最好的选择。

来源

2012-01-07 17:40:07 davidethell

你没有在你的示例代码中指定div的任何内容，但假设div的id为“rightcolumn”，那么你可以插入一个图像插入p元素的方式：

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

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

更新

为了获得本地URL的图像，假设HTML正在通过file网址，而不是通过http访问的URL，你可以像下面这样。

类型文件的输入字段添加到您的窗体：

<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 URL打开网页，则$("img_input").val()通常只会返回文件名，而不是完整路径。

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

来源

2012-01-07 17:43:35 dgvid

好的，但我怎样才能做到这一点输入表单？如何指定一个图像的路径，而不直接在.prop方法中作为参数输入？ – 2012-01-07 17:49:37

已更新，以显示如何通过输入元素获取图像路径。 – dgvid 2012-01-09 18:28:17

对不起，它没有工作。当我做console.log（imgUrl）;在firebug中输出：C：\ fakepath \ myfile.png – 2012-01-22 17:27:53

使用这个jQuery来获取图像URL从文字框：

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

});

来源

2012-01-07 18:51:49

放置一个<div>你的页面中并设置其id以独特的东西，如targetdivid
保存imageurl作为一个JavaScript数组如imageurls

最后应用以下技术

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

来源

2012-08-10 10:24:39 Danial

如何插入图像到div使用窗体和jQuery的

回答

相关问题