web-dev-qa-db-ja.com

HTML5FileReaderの「入力タイプ」から前のファイルをクリアする方法

私はファイル入力を持っています：

<img id="uploadPreview">
   <div id="changeImage">Change</div>
<div id="customImage">
   <input type="file" id="myfile" multiple style="display:none" onchange="PreviewImage();" />
   <div class='upload blank' id="add-image"></div>
</div>

機能は以下のとおりです。

var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("myfile").files[0]);

oFReader.onload = function (oFREvent) {
    document.getElementById("uploadPreview").src = oFREvent.target.result;
};

function PreviewImage() {
        var oFReader = new FileReader();
        oFReader.readAsDataURL(document.getElementById("myfile").files[0]);
        $("#uploadPreview").removeClass('hide'); //for manipulating something in the dom
        $('#changeImage').removeClass('hide'); //for manipulating something in the dom
        $("#customImage").addClass('hide'); //these are for manipulating something in the dom

        oFReader.onload = function (oFREvent) {
            document.getElementById("uploadPreview").src = oFREvent.target.result;
        };
    };

すべてが完璧に機能します。今、私は変更ボタンを持っています。誰かがそれをクリックした場合、以前にアップロードされたファイルの詳細は削除されます。関数は次のようなものです。

$('#changeImage').click(function(){
  $('#uploadPreview').addClass('hide');
  $('#customImage').removeClass('hide');
  //here I want to remove/clear the details about the already previous uploaded file in the 'file-input'. So the same image can be shown if someone clicks it for once again. 

});

あなたはこれを手伝ってもらえますか？

javascripthtmljqueryfilereader
12
the.big.lebowski

ファイル入力を_<form>_タグ内に配置すると、組み込みの.reset()メソッドを使用できます。

HTML：

_<img id="uploadPreview">
   <div id="changeImage">Change</div>
<div id="customImage">
   <form id="fileform">
      <input type="file" id="myfile" multiple style="display:none" onchange="PreviewImage();" />
   </form>
   <div class='upload blank' id="add-image"></div>
</div>
_

JS：

_$('#changeImage').click(function(){
   $('#uploadPreview').addClass('hide');
   $('#customImage').removeClass('hide');
   // Reset the form
   $("#fileform")[0].reset();
});
_

jQueryなしのJS：

_var resetButton = document.getElementById('resetButton');
var fileInput = document.getElementById('fileInput');
var form = document.getElementById('form');

resetButton.addEventListener('click', function () {
    // resetting the file input only
    fileInput.value = null;

    // alternatively: resetting the entire form (works in older browsers too)
    form.reset();
});
_
9
sudee

他のフォームフィールドにデータを保持したい場合は、

HTML

    <input type='file' id='yourid' />

jQuery

    $('#yourid').val('');

これにより、アップロードしたファイルが入力タグからクリアされます

17
Aerious

Reactで、Chromeベースのブラウザでのファイル入力でこの問題が発生しました。 value=""とautoComplete={"new-password"}の組み合わせで修正しました

<input
  value=""
  type="file"
  autoComplete={"new-password"}
  onChange={e => pickHandler(e)}
/>
0
chidimo