inputタグにuploadした画像を削除する方法

Question

inputタグにuploadしてcanvasタグに描画したあと、inputタグに残ってる画像を削除したいのですが、以下のコードで削除できませんでした。

どのようにすれば、inputタグの画像をjavascriptで削除できるのでしょうか？ご教授お願いします

試したコード

function reset(){
  $("#file1").value = "";
  $("#file2").value = "";
}

# uploadボタン
<div　align='left' class="lefts">
     <canvas class="canvas" id="canvasL" width="480" height="480" style="border: 2px solid;"></canvas>
     <a id="test1">
       <font color="#FFFFFF"><label for="image"><b>左側を登録</b></label></font>
     </a>
     <input type="file" id="file1" accept="image/*" hidden>
   </div>


   <div align='right' class="rights">
     <canvas class="canvas" id="canvasR" width="480" height="480" style="border: 2px solid;"></canvas>
     <a id="test2">
       <font color="#FFFFFF"><label for="image"><b>右側を登録</b></label></font>
     </a>
     <input type="file" id="file2" accept="image/*" hidden>
   </div>


# 削除ボタン
<a class="ex2" onclick="reset()">
　　　<font color="#FFFFFF"><label for="image"><b>Reset</b></label></font>
</a>

Comments

[azuapricot]

$("#file1").val(""); でも消えませんか？

http://php.o0o0.jp/article/jquery-file_clear

[trafalbad]

消えませんでした、、、

Answer 1

input[type=file] に格納されたファイル情報(FileListオブジェクト)は、ユーザの手でファイル選択ダイアログを開きなおすまで保持されます（JavaScriptから削除できません）。

任意の要素にドラッグ＆ドロップする方法であれば、FileList は任意の変数に保持できるため、null を代入すると、JavaScript でリセットすることができます（「複数ファイルを扱い、個別に削除」は試したことがありません）。

コードサンプルは HTML5Rock JavaScript で File API を使用してファイルを読み取る が参考になると思います。

Answer 2

canvas要素をclearしてみて下さい。
(ctx,width,heightは実際に使用している名前に変えて下さい）

function reset() {
    ctx.clearRect(0, 0, width, height);
}

Answer 3

スマホからなので試してないですし簡単に。

$("#file1")に対してスタイルをdisplay:noneとして非表示にするのも有りではないですか？