フォームとjqueryを使用してdivに画像を挿入する方法

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

あなたは、通常の順序でサーバに画像をアップロードする必要がありますあなたのページの画像を見る。 html5からコンストラクトを使用してアップロードせずに必要なものをサポートするブラウザがいくつかありますが、アップロードはおそらく今のところ最大の賭けです。

Answer 2

サンプルコードのdivについては何も指定しませんが、divにid "rightcolumn"があると仮定するだけで、p要素を挿入するのと同じ方法で画像を挿入できます。

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

これは、my_image_file.jpgがWebページ自体と同じ計算で同じディレクトリにあることを前提としています。そうでない場合は、srcプロパティのコンピュータ上のイメージファイルの完全なURLを指定します。

---

更新

あなたは、HTMLがhttp URLを通じてfile URLを経由してアクセスしていないされていることを、次のようなものができたと仮定すると、画像のローカル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サーバーも含む）を介してではありません。セキュリティ上の理由から、ほとんどのブラウザでは、WebサーバーからのWebページにローカルファイル名のフルパスを取得することはできません。 HTTP URLからWebページを開いた場合、$("img_input").val()は通常、フルパスではなくファイル名のみを返します。

私は、WebサーバーからロードされたWebページからのローカルファイルの完全なパスに対して、信頼性の高いクロスブラウザー手法を認識していません。

Answer 3

使用このjqueryのはTEXTBOXから画像URLを取得するには：

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

}); 

Answer 4

置き、ページ内の<div>と設定されたidユニークなものになどtargetdivid
JavaScriptの配列として保存imageurlなどimageurls

最後に次のテクニックを適用してください。

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