如何插入圖像到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的

回答

相關問題