Thursday, 21 June 2018

How to delete the specifuc value of an “input type=file” multiple

i am using input type='file' with multiple file and one with single file. like,
//single image
//IMAGE_TYPES is constant and defined with:define('IMAGE_TYPES',array('main',
'floor','bedroom1','bedroom2','bedroom3','kitchen','reception','garages','epc','other'));
@foreach(IMAGE_TYPES as $images)
    @if($images!='other')
    <div class="col-sm-10">
        <input type="file" class="form-control" id="_image" name="_image" 
accept="image/*" placeholder="<span> <i class='fa fa-plus-circle'></i>Click 
here or drop files to upload</span>"/>
    </div>
    @else
    //multiple
    <div class="col-sm-10">
        <input type="file" class="form-control" id="other_images"
 name="other_images[]" accept="image/*" placeholder="<span> <i
 class='fa fa-plus-circle'></i>Click here or drop files to upload</span>"
 multiple />
    </div>
    @endif
@endforeach

now, i validating it with jquery like,
var image_type ='<?=json_encode(IMAGE_TYPES);?>';
image_type = JSON.parse(image_type);
var max_image_size = 2;
$.each(image_type, function( index, value ) {
  if (value!='other') {
    $('#'+value+'_image').bind('change', function() {
      var a=(this.files[0].size);
      var ValidImageTypes = ["image/jpeg", "image/png"];
      if ($.inArray(this.files[0].type, ValidImageTypes) < 0) {
        show_notification('error','Only .jpg/.jpeg and .png file allowed.
 Please select other image.');
        var file = document.getElementById(value+'_image');
        file.value = file.defaultValue;
        return false;
      }
      else{
        if (Math.round(a / (1024 * 1024)) > max_image_size) {
          show_notification('error','Image is Greater than '+max_image_size+'MB.
 Please select smaller image.');
          var file = document.getElementById(value+'_image');
          file.value = file.defaultValue;
          return false;
        }
        else
        {
          preview_main_image(value);//won't matter
        }
     }
    });
  }
  else{
    $('#other_images').bind('change', function() {
      $('div.add_preview').remove();//won't matter
      for (var i = 0; i < $("#other_images").get(0).files.length; i++) { 
        var a=(this.files[i].size);
        var name = this.files[i].name;
        var ValidImageTypes = ["image/jpeg", "image/png"];
        if ($.inArray(this.files[i].type, ValidImageTypes) < 0) {
          show_notification('error','Image '+name+' is Not allowed. Only .jpg/.jpeg and 
.png file allowed. Please select other image.');
        }
        else{
          if (Math.round(a / (1024 * 1024)) > max_image_size) {
            show_notification('error','Image '+name+' is Greater than '+max_image_size+'MB.
 Please select smaller image.');
          }
          else
          {
            $('#other_image_preview').append("<div class='col-md-2 p_3 add_preview'><img
 class='img-responsive' src='"+URL.createObjectURL(event.target.files[i])+"'></div>");
//won't matter
            //preview_detail_images(value);
          }
        }
      }
    });
  }
});

now, my question is when i am using single image if image is not fitting in validation then i delete it's value from input type='file' using, this code
var file = document.getElementById(value+'_image');
file.value = file.defaultValue;
return false;

but when i select multiple image and if any image is not fitting in validation then how can i remove that particular image from input type='file'. please help me


from How to delete the specifuc value of an “input type=file” multiple

No comments:

Post a Comment