php - 既存の画像をクリックして画像をアップロードする

Question

画像といくつかの情報を含む簡単なプロフィールページがあります。このプロフィールページには、登録時に提供された情報が表示されます。

私が欲しいのは、登録ユーザーが自分のプロフィールページでアップロード画像をクリックして、新しい画像と交換できるようにすることです。

私はこれをデータベース側から処理する方法を知っています。

HTMLまたはフロントエンド側でヘルプが必要です。画像をクリックしてアップロード画像ウィンドウを開くにはどうすればよいですか。

Answer 1

これに対する最も簡単な解決策は、実際のファイルアップロード要素をページのオフセットに配置し、ユーザーがプロフィール画像をクリックしたときにクリックを「フォワードトリガー」することです。

HTML:

<input id="profile-image-upload" class="hidden" type="file">
<div id="profile-image">click here to change profile image</div>

JS:

$('#profile-image').on('click', function() {
    $('#profile-image-upload').click();
});

私のフィドルを参照してください: http://jsfiddle.net/L8xCb/3/

Answer 2

あなたはすでに何を試しましたか？考えられる解決策の 1 つは、次のようなものです。

jQuery:

$('.current_image').click(function() {
   $('.new_image_box').toggle();
});

HTML:

<img src="/path/to/avatar.png" class="current_image" />

<div class="new_image_box">
   <input type="file" name="new_avatar"/>
</div>

---

JavaScript を避けて HTML を使用し、既存のページをクリックしたユーザーが新しいページにリダイレクトされるようにする場合は、次を使用します。

<a href="/upload-form">
   <img src="/path/to/avatar.png" />
</a>

Answer 3

html ではスキン ファイルの入力が許可されていないため、画像を入力として使用することはできません。

しかし、いくつかの回避策があります。私が知っている2つの方法：

まず、隠しファイル入力を配置し、画像がクリックされたときにそれをトリガーします。

<img src="avatar.jpg" width="50" height="50" alt="" class="myAvatar" />
<input type="file" name="newAvatar" id="newAvatar" style="display:none;" />
<script>
$(".myAvatar").click(function() {
    $("#newAvatar").trigger("click");
});
</script>

2 番目の方法は、入力を画像の前に置き、その不透明度を 0 に設定することです。

<div style="position: relative;">
    <img src="avatar.jpg" width="50" height="50" alt="" class="myAvatar" style="position:absolute; top:0; left:0; z-index:1;" />
    <input type="file" name="newAvatar" id="newAvatar" style="width:50px; height:50px; position:absolute; top:0px; left:0; z-index:2; opacity:0;" />
</div>

注: ただし、いくつかの欠点があります。最初の方法には Internet Explorer で問題があり、2 番目の方法を使用すると、アバターにマウスオーバー イベントを使用できません。