Multiple Ajax Image Upload & Resize with PHP

Closed

*** Language : You may use PHP, Ajax or Jquery ***

*** Requirement: Pack all code into 1 js and 1 PHP file. Do not split it. ***

*** All settings are configurable at top the PHP script ***

*** Should be cross major browser (IE,Firefox,Chrome, Safari) compatible (or degrade properly) and at least IE6 compliant. ***

[ ***IMPORTANT*** : see attached picture for how the design and details of script needed ]

I required a simple multiple image upload by ajax (you can use a hidden iframe) and a combination picture resizing tool in ajax style. (no reload)

0) Any number of Image upload inputs can be coded and loaded during page loads. So if I decides to allow 6 file upload, there will be 6 input upload options side by side. Input file options added are linked via class defined by your script.

1) At start, all the image upload button is displayed, but if there are 6 image upload inputs, only the first image #1 input is enabled, #2 to #6 input are disabled. You can do this by JQuery. Only if a successful first image upload, then the next corresponding input are enabled so user post image by according to order.

2) Before image is uploaded, the selected file is check for (configurable) allowable file types and maximum file size. If any of the condition fails, a message displayed is shown on the error div on the main page. If file selected passed the check, the image is automatically uploaded via ajax to a (configurable) folder upon user selection (no need to click any button or submit). It fires the post to hidden iframe/XHR automatically.

3) Uploaded picture will be immediately resized and renamed with a new (unique based on micro-time) file name and image is resize from 1 to 3 sizes (configurable, based on fixed width or by width+length ratio) and store at a specific folder (configurable). Filename of the resized image are appended with suffix eg: [url removed, login to view], [url removed, login to view] and etc.

4) A gif loader will be displayed at thumbnail div to show upload activity is taking place, no need to track progress by %. Once upload is completed, loader is disabled. The thumbnail div will show the thumbnail of the recently uploaded picture, (configurable to use which size but all image uses the same option).

5) The filename of generated will be passed back to the main page and kept as a hidden input value and (configurable) size of thumbnail of the uploaded picture will be displayed at the preset target thumbnail div.

6) Upon success of first uploaded image, the input for the next file upload is enabled so user can upload the 2nd file.

7) When 2 or more picture are uploaded, user can select which picture is the primary picture, denoted by a highlight of a border around the picture. The value of the selected primary image is stored at a preset hidden input so can be posted later.

8) Once a picture is uploaded, an option to remove picture is placed on top of the thumbnail div. If the user choose to remove a picture, the entire input option+thumbnail div is removed and the rest of the already uploaded image moves towards left. You can observed some similarity of this behavior at bonanza dot com image upload.

9) That is about it and remember see attached picture file for design layout before bidding so you understand what you are expected to do.

10) Please provide basic documentation of how the script works in case I want to make changes in the future.

[ ***IMPORTANT*** : see attached picture for how the design and details of script needed ]

Skills: AJAX, jQuery / Prototype, PHP, Software Architecture

See more: multiple image upload jquery, jquery image upload multiple resize, multiple ajax image upload, ajax multiple image upload resize jquery php, ajax image upload primary, upload image multiple sizes jquery ajax, php ajax upload jquery resize, multiple image upload resize php code, multiple upload remove image ajax, jquery image upload resize, multiple ajax image, php jquery ajax image resize, multiple image upload php ajax, you may not need jquery, what php can do, what can you do with php, use case types, types of ajax, top coded, this class jquery, php style, multiple image upload in php, jquery main js, jquery class, image by design

Project ID: #1118375

11 freelancers are bidding on average $74 for this job

Sphinks

Let's do it. Thanks!

$100 USD in 2 days
(88 Reviews)
6.6
acesolution

lets do it now..........thanks

$100 USD in 2 days
(110 Reviews)
6.5
ccristi77

Hi, I can do this for you. Best Regards, Cristi

$70 USD in 5 days
(13 Reviews)
5.6
boygiandi

Hi. I have an sharing photo site, and i'm expert in PHP, Jquery. I can do this project for you. Thanks

$70 USD in 3 days
(38 Reviews)
5.4
ceoimaze

Hello Sir, Please visit PMB for more details. Thanks.

$100 USD in 2 days
(6 Reviews)
4.2
devprog03

Hi, We are 5+ years exp. web development and web designing team. I understand your requirement very well. We are motivated to providing only quality work and based on current web standard. Please check your PMB for mo More

$70 USD in 5 days
(1 Review)
2.6
karolisg

hi,will be glad to do this project

$60 USD in 3 days
(1 Review)
1.7
Ripon12345

I am really good at ajax development and request for this work. Since i am new to freelancer so i am charging less.

$35 USD in 5 days
(0 Reviews)
0.0
aditya589814176

I have 5+year of experience in web development & technologies designing, namely PHP, Linux, Apache, MySQL,wordpress,joomla,zencart,drupal,oscommerce, ,javascript, Ajax, Smarty, jQuery, prototype.js, mootools, xHTML, CS More

$80 USD in 2 days
(0 Reviews)
0.0
romhun75

hello i can help you

$55 USD in 2 days
(1 Review)
0.0
sachin134l

Hi, plese check pmb. Thanks.

$70 USD in 3 days
(1 Review)
0.0