Multiple Upload Image with Jquery

Multiple Upload Image with Jquery

Hi, I’m currently working on projects that implement multiple image-file upload. Let me share the results of my work. The concept of this script is very similiar with fyneworks – multiple file upload. What I’m trying to do is:

  1. Creating dynamic input file with DOM
  2. Can upload images up to 5 files


Here is the HTML source code:

    I’m using id(#form_upload_images, #upload_images, #list_image_fle) and class(“.multiImage”) for this work. Simple as needed. And what I do in this project is:

    1. Upload one file on the inputFile
    2. Hide it with CSS (visibility:hidden)
    3. Generate another inputFile
    4. If file not an image file and already on the upload list, write the error

    The simple CSS for this project to work:

    	#form_upload_images #list_image_file { display:block; list-style: none; margin: 0; padding: 0;}
	#form_upload_images .status { color: #C74350; font-weight: bold; }
	#form_upload_images .imgOK { visibility: hidden; position:absolute; top:0; left:-0 }
	#form_upload_images span.deleteInputFile {
		display: inline;
		background: #C74350;
		margin-right: 10px;
		padding: 0 5px;
		color: #FFF;
		font-weight: bold;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		cursor: pointer;
	}

    This is the Javascript source code with Jquery:

    function addImgInput(inputClone) {
	$(inputClone).appendTo( $('#upload_images') ); //div container for generated InputFileImg
};
function addImgList(listingImg, j) {
	$('#list_image_file').append('

  • x ' + listingImg + '
    • 

' );
	//list all images that have been inputted
}
function addErrorStatus(error) {
	$('#upload_images').append(''+ error +''); //error display container
}
function removeImgStatus() {
	$('.status').remove();
}

    $("document").ready(function () {

	var iInputtedFile = 1; //iteration for Inputted File
	var maxInputtedFile = 5; //max file uploaded
	var jInputtedFile = 1; //iteration for generated Dinamic Input
	var arrayInputtedFile = new Array();

	$('.multiImage').live('change',function() {

		if($(this).val() ) {

			var ext = $(this).val().split('.').pop().toLowerCase();
			var allow = [ 'gif', 'png', 'jpg', 'jpeg' ];

			if (jQuery.inArray(ext, allow) != -1) {	//validation file_extension true

				//if there is the not same input file
				if (jQuery.inArray($(this).val(), arrayInputtedFile) == -1) {	

					if (iInputtedFile < maxInputtedFile) {
						addImgInput($(this).clone());
					}
					else {
						addImgInput($(this).clone().attr('disabled', 'disabled'));
					}
					$(this).addClass('imgOK no'+jInputtedFile);
					$(this).removeClass('multiImage');
					addImgList($(this).val(), jInputtedFile);
					removeImgStatus();
					arrayInputtedFile[jInputtedFile] = $(this).val();
					iInputtedFile++;jInputtedFile++;
				}
				else {
					$(this).remove();
					addImgInput($(this).clone());
					removeImgStatus();
					addErrorStatus('* File is already on the upload-list');
				}
			}

			else {
				$(this).remove();
				addImgInput($(this).clone());
				removeImgStatus();
				addErrorStatus('* Error file extension');
			}

		}
	});

	// function for delete fileInput on the list
	$('.deleteInputFile').live('click', function() {
		$(".imgOK[class*="+$(this).attr('id')+"]").remove();
		$("li[class*="+$(this).attr('id')+"]").remove();
		$('.multiImage').removeAttr('disabled');
		arrayInputtedFile[$(this).attr('id').split('o').pop()] = '';
		iInputtedFile--;
	});

});

    You can edit maxInputtedFile if you want more files can be uploaded.

    This is the snapshot of the forms that I created:


    Yeah, something like that...

    Thanks to Pablo that answered Anthony question about "How to have jQuery restrict file types on upload?". I'm using it in this project. Thanks to j. and TreeUK to give me inspiration about using .live() jquery function when I asked about "Jquery: how to call the function again?".

    Note: If you want to build a jquery plugin base on this code, let me know ok? I'll use your plugin. ^_^

    4 Responses so far.

    1. Form Multiple Image-ku Selesai! | bakazero's backstage says:
      March 24, 2010 at 5:28 pm

      [...] buat yang mau lihat implementasi fitur upload multiple image, silahkan langsung ke blog bahasa inggrisku ya. Saya bingung kalau mau tulis ulang scriptnya [...]

    2. Tweets that mention Multiple Upload Image with Jquery | SeekBob -- Topsy.com says:
      March 24, 2010 at 6:49 pm

      [...] This post was mentioned on Twitter by Bobby Ariffin, Bobby Ariffin. Bobby Ariffin said: RT @seekbob: Multiple Upload Image with Jquery http://seekbob.com/2010/03/24/multiple-upload-image-with-jquery/ [...]

    3. forex robot says:
      April 4, 2010 at 5:33 pm

      Wow this is a great resource.. I’m enjoying it.. good article

    4. dental hygienist says:
      April 5, 2010 at 11:47 pm

      found your site on del.icio.us today and really liked it.. i bookmarked it and will be back to check it out some more later

    Leave a Reply