どのよう

Question

HTML5 FileReaderの中で「入力タイプ」から前のファイルを消去するために、私は、ファイル入力を持っている：

<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. 

}); 

これは助けてくれますか？

Answer 1

<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：jQueryのなし

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

---

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(); 
}); 

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

Answer 2

、あなたは

これは、入力タグからアップロードしたファイルをクリアします

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

HTML

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

jQueryの