0

こんにちは、誰でも私を助けてくれますか

画像を選択したときに画像をレンダリングするこのフォームを取得しました。間違った画像が選択された場合に備えて、各画像に削除ボタンが必要です。

それを行う方法がわかりませんでした。

ヘルプ、コメント、リンク、提案は何でも構いません。前もって感謝します。

これは私のデモです

//I just copy paste the code inside my demo.
4

2 に答える 2

0

このコードでは、画像をクリックすると、画像を削除するかどうかを確認するボックスが表示されます。

受け入れた場合は、DOM から削除します。

の 2 行の間に addEventListener をコピーします。//your code

thumb.setAttribute('src',e.target.result);// your code

thumb.addEventListener('click',function(){
 if(confirm('delete?')){
  this.parentNode.removeChild(this)
 }
},false);

document.getElementById('images_preview').appendChild(thumb); // your code

他の目的で画像を選択する必要がない場合は、これが最も速い方法です。

また、(this) を使用して画像を直接操作します。

素敵なボタン効果を作成するには、ホバー時に css スタイルを追加するだけです。

#images_preview>img:hover:after{
 //here u add a nice delete icon
}

より多くのボタンと各画像を選択する可能性が必要な場合は、画像を背景として左のフローティング div に配置し、div 内に必要なさまざまなボタンを配置します。

于 2013-07-08T10:27:10.927 に答える
0

#images_preview 内のコンテンツをクリアするだけです。

function clearContent()
{
   document.getElementById('images_preview').innerHTML="";
}

編集済み

画像をレンダリングした直後に以下のコードを追加します(document.getElementById('images_preview').appendChild(thumb); の後)。

var element = document.createElement("input"); 
 element.setAttribute("type", "button");
 element.setAttribute("value", "clear");
 element.addEventListener('click', clearContent, false);
 document.getElementById('images_preview').appendChild(element);
于 2013-07-08T10:18:07.460 に答える