<div class="input"><strong class="star">Campaign images </strong>
<span><input type="file" placeholder="" name="campaign_images[]" accept="image/*" class="campaign_images" data-id="1"><br/>
<img class="campaign_image1" src="#" alt="your Campaign Poster Display Here " class="img-responsive" style="margin-bottom: 10px; display:none; width:100px; height:100px" /><button class="btnRmv" type="button">Remove</button></span>
<span><input type="file" placeholder="" name="campaign_images[]" class="campaign_images" accept="image/*" ><br/>
<img class="campaign_image2" src="#" alt="your Campaign Poster Display Here " class="img-responsive" style="margin-bottom: 10px; display:none; width:100px; height:100px" /><button class="btnRmv" type="button">Remove</button></span>
<span><input type="file" placeholder="" name="campaign_images[]" class="campaign_images" accept="image/*" ><br/>
<img class="campaign_image3" src="#" alt="your Campaign Poster Display Here " class="img-responsive" style="margin-bottom: 10px; display:none; width:100px; height:100px" /><button class="btnRmv" type="button">Remove</button></span>
</div>
<script>
$(document).ready(function(){
$('.btnRmv').hide();
var max_file_upload_size = 100000;//1mb
$(document).on('change','.campaign_images',function(e){
var t=$(this);
if(max_file_upload_size < this.files[0].size){
alert("Allowed file size exceeded. (Max. 1 MB)")
t.parent('span').find('img').hide();
t.parent('span').find('button').hide();
t.parent('span').find('input').val('');
return false;
}
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
t.parent('span').find('img').attr('src', e.target.result);
t.parent('span').find('img').show();
t.parent('span').find('.btnRmv').show();
}
reader.readAsDataURL(this.files[0]);
}
});
$(document).on('click','.btnRmv',function(e){
e.preventDefault();
$(this).parent('span').find('img').hide();
$(this).hide();
$(this).parent('span').find('input').val('');
});
})
</script>
<span><input type="file" placeholder="" name="campaign_images[]" accept="image/*" class="campaign_images" data-id="1"><br/>
<img class="campaign_image1" src="#" alt="your Campaign Poster Display Here " class="img-responsive" style="margin-bottom: 10px; display:none; width:100px; height:100px" /><button class="btnRmv" type="button">Remove</button></span>
<span><input type="file" placeholder="" name="campaign_images[]" class="campaign_images" accept="image/*" ><br/>
<img class="campaign_image2" src="#" alt="your Campaign Poster Display Here " class="img-responsive" style="margin-bottom: 10px; display:none; width:100px; height:100px" /><button class="btnRmv" type="button">Remove</button></span>
<span><input type="file" placeholder="" name="campaign_images[]" class="campaign_images" accept="image/*" ><br/>
<img class="campaign_image3" src="#" alt="your Campaign Poster Display Here " class="img-responsive" style="margin-bottom: 10px; display:none; width:100px; height:100px" /><button class="btnRmv" type="button">Remove</button></span>
</div>
<script>
$(document).ready(function(){
$('.btnRmv').hide();
var max_file_upload_size = 100000;//1mb
$(document).on('change','.campaign_images',function(e){
var t=$(this);
if(max_file_upload_size < this.files[0].size){
alert("Allowed file size exceeded. (Max. 1 MB)")
t.parent('span').find('img').hide();
t.parent('span').find('button').hide();
t.parent('span').find('input').val('');
return false;
}
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
t.parent('span').find('img').attr('src', e.target.result);
t.parent('span').find('img').show();
t.parent('span').find('.btnRmv').show();
}
reader.readAsDataURL(this.files[0]);
}
});
$(document).on('click','.btnRmv',function(e){
e.preventDefault();
$(this).parent('span').find('img').hide();
$(this).hide();
$(this).parent('span').find('input').val('');
});
})
</script>
Demo
Campaign images
0 comments:
Post a Comment