html - 入力ファイルを背景として表示しますか?

Question

HTMLドキュメント内にファイル入力を表示するにはどうすればよいのでしょうか。

<input type="file">画像ファイルを選択できますが、既存の HTML 構造内でどのように使用できるかよくわかりません。html/css唯一の回避策で、選択した画像をドキュメント内に表示したい。これは、オフラインでの使用/学習目的のためだけです。

任意の提案をいただければ幸いです。ありがとうございました。

Answer 1

できません。プリロードされたページに画像をアップロードしています。DOM は既にビルドされています。クライアントのアクション後に DOM を変更する場合は、クライアント側のコードを使用する必要があります。Jquery.css() メソッドを使用して body:background を変更します

@EDIT：また、そのファイルを作成するには、その入力をフォーム内に配置して送信する必要があります。

@EDIT2: HTML フォームを送信すると、アクションがトリガーされます (フォーム要素のアクション属性の値に対して HTTP 要求が行われます。GET または POST の場合があります)。この値を設定することも、空白のままにすることもできます。ほとんどのブラウザは、現在表示しているページにリクエストを送信します。ファイルがサーバーに送信され、ページが再度読み込まれますが、ファイルに関するすべての情報が失われます。

ユーザーがバックグラウンド ファイルを送信できるようにする場合は、サーバー側の言語を使用してファイルのデータを処理することもできます。ファイルの名前を「background.jpg」に変更する php 関数にアクションを配置します。たとえば、その名前を body:background に配置します。

Answer 2

inputファイルを無地のHTML/から背景に変換するCSSことはできません。この場合、Javascript を使用する必要があります。ActiveX を使用することをお勧めします。アイデアは次のとおりです。

var oFSO = new ActiveXObject("Scripting.FileSystemObject");
var oCTF = oFSO.CreateTextFile("C:\\myimage.jpg", true);
oCTF.write(document.getElementById("Data").value);
oCTF.Close();

これを関数で処理する必要があります。これは、送信時にトリガーされるonclick=か、同様のものです。

注: 仕事中なので、このビットはテストしていません。とにかく必要に応じて変更する必要がありますが。