More file upload button attachment dynamically using jQuery

Introduction

Here is an example on more file upload button attachment dynamically using jQuery. This example will allow you to attach more file upload button dynamically. The technology we will use here to attach more file upload button using JavaScript and jQuery. Note that this example will not show you how to upload file or files. This is only UI or client side example.

Prerequisites

Knowledge on JavaScript and jQuery

Example with Source Code

HTML – File Input

By default only one file upload button is visible to the user. When a file is selected using the Browse button then only Attach another file link gets enabled for attaching another file. You can attach as many files as you want. If you think you have selected incorrect file for uploading then you can detach that file as well. Simply click on Delete link to delete the unnecessary selected file.

The below code snippets should be put under <body> section.

<div class="element">
	<label>Upload file</label>
	<input type="file" name="upload_file1" id="upload_file1"/>
</div>
<div id="moreImageUpload"></div>
<div class="clear"></div>
<div id="moreImageUploadLink" style="display:none;margin-left: 10px;">
	<a href="javascript:void(0);" id="attachMore">Attach another file</a>
</div>

Show More File Link – jQuery

The below jQuery function shows the Attach another file link to the user when at least one file gets selected using the default Browse button.

The below code snippets should be put under <head> section under <script> tag.

$(document).ready(function() {
	$("input[id^='upload_file']").each(function() {
		var id = parseInt(this.id.replace("upload_file", ""));
		$("#upload_file" + id).change(function() {
			if ($("#upload_file" + id).val() != "") {
				$("#moreImageUploadLink").show();
			}
		});
	});
});

Attach More File Link – jQuery

The below jquery function creates the dynamic file upload link for more file attachments. It also creates a Delete link for each dynamically created file upload link so that you can also delete a particular file upload link. It also gets a confirmation from the user before deleting a particular file upload link.

The below code snippets should be put under <head> section under <script> tag.

$(document).ready(function() {
	var upload_number = 2;
	$('#attachMore').click(function() {
		//add more file
		var moreUploadTag = '';
		moreUploadTag += '<div class="element"><label for="upload_file"' + upload_number + '>Upload File ' + upload_number + '</label>';
		moreUploadTag += '<input type="file" id="upload_file' + upload_number + '" name="upload_file' + upload_number + '"/>';
		moreUploadTag += ' <a href="javascript:del_file(' + upload_number + ')" style="cursor:pointer;" onclick="return confirm("Are you really want to delete ?")">Delete ' + upload_number + '</a></div>';
		$('<dl id="delete_file' + upload_number + '">' + moreUploadTag + '</dl>').fadeIn('slow').appendTo('#moreImageUpload');
		upload_number++;
	});
});

Delete More File Link – JavaScript

The below function deletes a particular dynamically attached file upload link.

The below code snippets should be put under <head> section under <script> tag.

function del_file(eleId) {
	var ele = document.getElementById("delete_file" + eleId);
	ele.parentNode.removeChild(ele);
}

Testing the Application

Open the HTML file under chrome browser or any other browser, you will see the following output:

more file upload button attachment dynamically using jquery

When you choose at least one file then you should be able to see Attach another file link:

more file upload button attachment dynamically using jquery

You can attach another file using the Attach another file link and you should see Delete link for deleting a particular selected file.

more file upload button attachment dynamically using jquery

As I said previously you won’t be able to upload any file but it’s just an example on how to attach more file upload buttons dynamically using jQuery library.

Source Code

You can download source code.

Thanks for reading.

More file upload button attachment dynamically using jQuery

5 thoughts on “More file upload button attachment dynamically using jQuery

  1. Hi,

    I used the first script to upload files but when a file is selected using the ‘Browse’ button the ‘Attach another file’ link is not enabled for attaching another file.
    Secondly, where is the folder are the files uploaded to?
    Thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top