Resolved Need to limit how many files can be added [Archive]

qwikad.com

07-05-2014, 01:55 AM

Here's a working demo: http://qwikad.com/test.php

Currently you can add any number of files. I need to limit it to 10. How would you accomplish this?

var abc = 0; //Declaring and defining global increement variable

$(document).ready(function() {

//To add new input file field dynamically, on click of "Add More Files" button below function will be executed
$('#add_more').click(function() {
$(this).after($("<div/>", {id: 'filediv'}).fadeIn('slow').append(
$("<input/>", {name: 'pic[]', type: 'file', id: 'file'}),
$("<br>")
));
});

//following function will executes on change event of file input to select different file
$('body').on('change', '#file', function(){
if (this.files && this.files[0]) {
abc += 1; //increementing global variable by 1

var z = abc - 1;
var x = $(this).parent().find('#previewimg' + z).remove();
$(this).before("<div id='abcd"+ abc +"' class='abcd'><img id='previewimg" + abc + "' src=''/></div>");

var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);

$(this).hide();
$("#abcd"+ abc).append($("<img/>", {id: 'img', src: 'images/x.png', alt: 'delete'}).click(function() {
$(this).parent().parent().remove();
}));
}
});

//To preview image
function imageIsLoaded(e) {
$('#previewimg' + abc).attr('src', e.target.result);
};

$('#upload').click(function(e) {
var name = $(":file").val();
if (!name)
{
alert("First Image Must Be Selected");
e.preventDefault();
}
});
});

Deadweight

07-06-2014, 01:45 AM

Here is an example. Tell me if this is what you are looking for.

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Count After</title>
<script src="../js/jquery.js"></script>
<script src="append.js"></script>

<style>
#fileContainer, #append { border:1px solid black; width: 150px;}
#fileContainer {margin-top: 2px;}
#append { cursor:pointer;}
</style>

</head>
<body>
<div id="append">Add More Files</div>
<div id="fileContainer">
<div class="file">Add</div>
</div>
</body>
</html>

append.js

$(function(){

$(document).on('click','#append',function(){
var count = $('#fileContainer').children('.file').length;
if(count<10)
appendFile('#fileContainer','file');
})

})

function appendFile(area, style){
$(area).append('<div class="'+style+'">Add</div>')
}

FYI do not use id for multiple styling. Use class.

qwikad.com

07-06-2014, 03:39 PM

It is. But I have no idea how to integrate it into the existing code.

Keep in mind that it should allow to have up to 10 files at any time. If let's say I cancel an image and that file field goes away, I should be able to add a new one. That's what the current code allows.

Deadweight

07-06-2014, 05:32 PM

It doesnt matter if you cancel an image because it checks the current count inside the div once it is clicked.

To add new input file field dynamically, on click of "Add More Files" button below function will be executed
$('#add_more').click(function() {
if($('#im_container').children('#filediv').length<10){
$(this).after($("<div/>", {id: 'filediv'}).fadeIn('slow').append(
$("<input/>", {name: 'pic[]', type: 'file', id: 'file'}),
$("<br>")
));
}
});

Please change id="filediv" to class="filediv" once you change that then use this

To add new input file field dynamically, on click of "Add More Files" button below function will be executed
$('#add_more').click(function() {
if($('#im_container').children('.filediv').length<10){
$(this).after($("<div/>", {id: 'filediv'}).fadeIn('slow').append(
$("<input/>", {name: 'pic[]', type: 'file', id: 'file'}),
$("<br>")
));
}
});

qwikad.com

07-06-2014, 05:44 PM

Working great. Thank you so much!

Deadweight

07-06-2014, 06:41 PM

Just letting you know in your body you have <div id="filediv">...</div> You also need to change the beginning to class="filediv" because currently it is giving you 11 not 10 due to that problem.