Follow Me

Dynamic jquery multiple image upload with delete and limit features

Sun, Sep 5, 2010

JQuery, PHP

Hello Friends,

Few days back I received request from one of the user of blog to add two extra features to our existing multiple image upload script.

1 – How To add limit for upload images.
2 – How To add remove link for each image.

Multiple image upload with delete and limit features

I have added both features in existing image upload script. It is not too complex, we can achieve that in simple steps. Lets start with image upload limit.

First choose limit variable and its limit in upload-file.php file. We can set limit at the time of insertion of images so after checking existing session, find out how many rows database have with current session. It will give number of row and now check it with limit variable. If it is still in limit then allow script to upload more images otherwise display (echo) message of upload limit exceeded.

upload-file.php

        // select total rows this this session and check with limit
	$check_limit=mysql_query("select * from match_item_image where item_id='".$_SESSION["session_temp"]."'") or die(mysql_error());
	//echo mysql_num_rows($check_limit);
	if(mysql_num_rows($check_limit)>=$limit)
	{
		echo "You can upload max ".$limit." picture(s)";
	}
	else
	{
             // code for image upload continues....
        }

Second one was to add a delete link with each file. This can also be achieved with some ajax code in existing. On index.php file add delete link in response text and call ajax function on that link. This link having image id with it.

$('<span id='+idd+'></span>').appendTo('#files').html('<img src="images/'+file+'" alt="" width="120" height="120" style="margin:5px;" /><br><a href="javascript:void(0)" onClick="deleteFile('+idd+');">Delete</a>').addClass('success');

Now this deleteFile function will send request to delete-file.php file to delete current image and delete-file.php file will delete image from database and also remove it from folder.

You can download source code.

Cheers :)

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • Blogplay
  • blogmarks
  • Design Float
  • DZone
  • MySpace
  • Reddit
  • StumbleUpon
  • Twitter
, ,

Related Posts:


Recent Posts:

  • Best collection of firefox addons for web designers and developers
  • .htaccess basic features with example
  • how to include an external css and js with javascript dynamically
  • How to preserve line breaks in textarea mysql data
  • how to generate excel report with php and mysql
  • 21 Comments For This Post

    1. Gaurav Says:

      Hi

      Please tell me how can i integrate your codes in wordpress and exactly where. I am just beginner in wordpress and don’t know much about it.

      Please help…

    2. admin Says:

      Hi Gaurav,

      Wordpress already provided optimize image upload functionality while posting your post. Just check icons above textarea in add new post page.

    3. Kulwinder Says:

      Please suggest, this code is not working in IE.

      Thanks,

    4. admin Says:

      Hi Kulwinder,

      Which version you are using? Script is working fine on IE6 & IE7

    5. Kulwinder Singh Says:

      Thanks for your quick response.

      Please provide me the link of updated script. I will use that code.

      Thanks for your support.
      Regards,

    6. admin Says:

      @kulwinder Script is the same, which mentioned in this post. Please specify the exact problem you are facing along with ie version.

    7. Dan Says:

      I really like your script. It is exactly what I want to do.. How would I add a radio button to all of the photos for the user to choose as default.

      The application is in a classified ad and say for example the user uploads 3 images I would like to be a way for the user to choose one as the profile image…

      Please advise..

      Great script!!!! Just what I have been looking for..

    8. admin Says:

      @Dan Thanks. You can do it by just the way I did for delete feature. While receiving response on index page, add radio button besides delete link. Call one ajax function on click event on radio button. This ajax fun will save image id to user table as default image id.

      Hope this will help you.

    9. Fire Says:

      Hi, this is a very nice script. Exactly what I am looking for. Btw I am facing one issue that the images that have uploaded were not visible when I view it in the uploaded folder. Another thing, could you help to add in the resize function for the script as well as I was planning to include a few sizes of images into my site.

      Thanks
      Fire

    10. admin Says:

      @Fire Thanks. For image upload issue, check your folder permission settings. Make sure it is writable.

      Image Resize – Just go through with below post and use resize_picture function when you are uploading your pics.

      http://smartcoderszone.com/2010/05/simple-image-resize-script-in-php/

    11. Ishan Says:

      thank you very much. i am new to php. admin can you please help me to create a image retrive page using this. to view all images that 1 id has. i tried but is hard. pls help me.

      Thank You :)

    12. admin Says:

      @Ishan Its pretty simple. Just use basic select query to fetch all records from image table.

      Ex. select * from item_image where item_id = 1

      Now with the help of loop, you can fetch all images from the result set array.

    13. Ishan Says:

      thankx bro. i ll give a try :) i am not sure coz i am new to php. if you can please give a example code then i can understnd. actually i am stuck with this multiple image uploading & retrieving process for each user. :)
      for about 3 week i am looking for example projects finaly i found yours.now i want to view the pictures. PLS HELP ME!

      Thank You :)

    14. admin Says:

      @Ishan Thanks. Give me your email id or drop me an email. I will send you demo example code.

    15. ishan Says:

      i got your email bro.thank you verymuch.

      keep up the good work.
      cheerz :D

    16. tomas Says:

      Many thanks to you, very useful script!

    17. elkow Says:

      Hi there,

      really good stuff however i got problem once delete the thumbnail.
      the upload and title field show double or more whenever tried to delete the image. Can you advice what I’m missing or etc?

    18. computer Says:

      thanks for this nice sharing

    19. Dan Says:

      I have a request! Could you develop it so the user can also pick on of the images as a profile pic(default)?

      If you have any questions on what I mean, send me an email..

      Thanks, Dan

    20. Petr Bok Says:

      Thank you for thenice script. I have tried to integrate to my page but I have problem with the delete funktion. After clik on the detele link will the page duplicated – please see http://www.apartmany-basta.cz/upload/upload1.jpg and http://www.apartmany-basta.cz/upload/upload2.jpg

      Can you help me please?

    21. admin Says:

      @Dan Hope you will get the solution.

    Leave a Reply