フォームを送信する前に画像データが削除されていてもまだそこにある画像データ

Question

タイトルを謝罪してください。以下は私の問題です：

私は、選択した画像を削除して新しい画像を選択できるオプションで、ユーザーのコンピュータから画像ファイルを選択するときに、画像のサムネイルをDIY編集しました。

アップロードボタンをクリックすると、最後に選択したものと同じ画像がアップロードされています。私がそれを得ることができないのは、アップロードする前に画像の削除ボタンをクリックした場合、なぜそれも画像を持っていますか？以下は

は私のHTMLコードです：

<input id="trip-photo1" type="file" class="trip-ul-photo-img" name="trip-photo[]"> 
<label for="trip-photo1"></label> 

上記は私が持っている5入力の1です。私はこれが私の初めてのDIYも自分自身削除選択した画像であるとして、何が起こっているのか全く見当がつかない

$(document).on('change', 'input.trip-ul-photo-img', function(){ 
     var photo_wrapper  = $(".trip-ul-photo"); //Fields wrapper 
     var photo_button  = $(".btn-trip-ul-photo"); //Add button ID 
     var reader    = new FileReader(); 
     var photo    = $(this); 
     var btn_str    = ''; 
      btn_str    += '<button type="button" class="btn btn-link btn-photo-del" role="button">X</button>'; 

     reader.onload = function (e) { 
      // get loaded data and render thumbnail. 
      var img_str  = ''; 
       img_str  += '<img class="pro-set-up-photo-preview" src="' + e.target.result + '" />' 
      photo.parent().append(img_str, btn_str); 
     }; 

     // read the image file as a data URL. 
     reader.readAsDataURL(this.files[0]); 

    }); 

    $(document).on('click', '.btn-photo-del', function(){ 
     $(this).parent(".trip-ul-photo-group").next(".trip-ul-photo-cap-wrapper").children("input, p").remove(); 
     $(this).parent(".trip-ul-photo-group").children("img, button").remove(); 
    }); 

：以下

は私のjQueryのコードです。

ありがとうございました！

Answer 1

問題を解決しました。これは、ファイルを選択するたびに、ファイル入力のデフォルト動作です。プレビュー画像を削除するときは、データをnullに設定するだけです。