با سلام به دوستان گرامی...
بنده یک فرمی دارم که در آن تصویر آپلود میشود. تصاویر با استفاده از jquery به صورت پیش نمایش در میاید و امکان حذف هم دارد..
اما مشکلی که پیش میاد اینه که زمانی که دکمه browse رو میزنم و چهار تصویر انتخاب میکنم از قسمت پیش نمایش دوتای آن را حذف میکنم فقط پیشنمایش آن حذف میشود و نه خود فایل! و هنگام ارسال فرم با استفاده از پرینت آرایه $_FILE چهار تصویر وجود دارد نه دوتا! اما اگر به اضای اضافه کردن چهار تصویر چهار بار browse را بزنم هر بار یک تصویر اضافه کنم این مشکل پیش نمیاد و با حذف کردن تصاویر فایل هم حذف میشود و در آرایه ی $_FILE فقط دو تصویر وجود دارد! چجوری میتونماین مشکل رو هنگام انتخاب چنتایی تصویر حل کنم؟ ممنون میشم اگر راهنمای کنید: برای توضیح دادن داغونمم ازتون معذرت میخوام! از بچگی توضیح دادنم خوب نبوده!
کد HTML:
کد HTML:
<div class="field" align="left">
  <input type="file" id="images_{$name}" name="images[{$name}][]" multiple />
</div>
کد jquery:
کد HTML:
<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