آپلود عکس به صورت multiple پیش نمایش و حذف! حذف فایل انجام نمیشود!

[parsserver2]

با سلام به دوستان گرامی...
بنده یک فرمی دارم که در آن تصویر آپلود میشود. تصاویر با استفاده از jquery به صورت پیش نمایش در میاید و امکان حذف هم دارد..
اما مشکلی که پیش میاد اینه که زمانی که دکمه browse رو میزنم و چهار تصویر انتخاب میکنم از قسمت پیش نمایش دوتای آن را حذف میکنم فقط پیشنمایش آن حذف میشود و نه خود فایل! و هنگام ارسال فرم با استفاده از پرینت آرایه $_FILE چهار تصویر وجود دارد نه دوتا! اما اگر به اضای اضافه کردن چهار تصویر چهار بار browse را بزنم هر بار یک تصویر اضافه کنم این مشکل پیش نمیاد و با حذف کردن تصاویر فایل هم حذف میشود و در آرایه ی $_FILE فقط دو تصویر وجود دارد! چجوری میتونماین مشکل رو هنگام انتخاب چنتایی تصویر حل کنم؟ ممنون میشم اگر راهنمای کنید: برای توضیح دادن داغونمم ازتون معذرت میخوام! از بچگی توضیح دادنم خوب نبوده!
کد HTML:

<div class="field" align="left">
  <input type="file" id="images_{$name}" name="images[{$name}][]" multiple />
</div>

کد jquery:

<script>
  $(document).ready(function() {
    if (window.File && window.FileList && window.FileReader) {
      $("#images_{$name}").on("change", function(e) {
        var storedFiles = "images_{$name}";
        var files = e.target.files,
          filesLength = files.length;
        for (var i = 0; i < filesLength; i++) {
          var f = files[i]
          var fileReader = new FileReader();
          fileReader.onload = (function(e) {
            var file = e.target;
            $("<span class=\"pip\">" +
              "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
              "<br/><span class=\"remove\">{__('remove_image')}</span>" +
              "</span>").insertAfter("#images_{$name}");
            $(".remove").click(function(){
              $(this).parent(".pip").remove();
            });
          });
          fileReader.readAsDataURL(f);
        }
      });
    } else {
      alert("Your browser doesn't support to File API")
    }
  });
</script>

Screenshot_2020-04-21 https horn company.png

[parsserver2]

UP
لطفا جواب بدین خیلی گیرم!

[arash4rendy]

یه نگاه به این بنداز شاید کمکت کنه

https://codepen.io/gapgag55/pen/ZBENwJ

[parsserver2]

یه نگاه به این بنداز شاید کمکت کنه

https://codepen.io/gapgag55/pen/ZBENwJ

سلام.. ممنون از جوابت... داشتم نا امید میشدم کم کم کسی جواب بده!

[plague]

متاسفانه سوالاتی که اینجوری پرسیده میشه معمولا قابل پاسخ دادن نیستن
حدس میزنم که وقتی تک تک عکس ها رو اضافه میکنی به اضای هر عکس یک input اضافه میکنه به صفحه
در نتیجه وقتی عکس رو حذف میکنی اون input مربوط بهش هم حذف میشه

ولی وقتی چندین عکس رو با هم انتخاب میکنی برای همشون یک input با قابلت multiple اضافه میشه به صفحه و با حذف یکی از عکسا اون input از بین نمیره

البته اینا همش حدس و گمانه و نمیشه از روی کدت فهمید

راه ساده میخای اون multiple رو حذف کن که کاربر نتونه چند تا عکس انتخاب کنه

[parsserver2]

متاسفانه سوالاتی که اینجوری پرسیده میشه معمولا قابل پاسخ دادن نیستن
حدس میزنم که وقتی تک تک عکس ها رو اضافه میکنی به اضای هر عکس یک input اضافه میکنه به صفحه
در نتیجه وقتی عکس رو حذف میکنی اون input مربوط بهش هم حذف میشه

ولی وقتی چندین عکس رو با هم انتخاب میکنی برای همشون یک input با قابلت multiple اضافه میشه به صفحه و با حذف یکی از عکسا اون input از بین نمیره

البته اینا همش حدس و گمانه و نمیشه از روی کدت فهمید

راه ساده میخای اون multiple رو حذف کن که کاربر نتونه چند تا عکس انتخاب کنه

ممنونم دوست عزیز به خاطر راهنماییت منم همچین چیزی فک میکردم اتفاق بیوفته! درسته به همین خاطر multiple رو حذف کردم! شاید روزی به جوابش رسیدم!.. اگر این فرض که اگر چنتا عکس انتخاب شد موقع حذف میشه هم فایل رو حذف کرد هم اندیس آرایه اون فایل رو پیدا کرد آیتمش رو هم حذف کرد! ولی وقت اینکارو نداشتم بیخیالش شدم فعلا!