I have a user profile page and want to allow the user to do the following:
Click 'CHANGE AVATAR'
Select new pic and upload it
Pic shows in lightbox (of some sort)
Allow the user to use jcrop to crop image
Save cropped image in user folder
I can achieve the upload part and know how to use php to save a file to user folder and add filename to the users row in mysql table for avatar.
I can find no tutorials to show me how to open the image in a lightbox ad enable the user to edit with jcrop.
I figure I will have to:
post the uploaded filename to a php file (ajax?)
include the php file in an iframe to use with fancybox (or alternative)
echo the uploaded image and initialize jcrop within the php file for the shown image
Save the image with random filename using php
I am stuck with points 2-4 on the last list. Please help...
Can nobody seriously help me with this??
Related
I would like to implement multiple image upload with drag and drop functionality, but can't find anything online to help with my specific case.
The thing is I would like to resize images on upload to 16:9 ratio, and show thumbnails as they get uploaded. Also I am using a label that I wrote some css to style it as a nice upload button and I trigger a hidden file upload input with that label.
<label for="image">Upload image</label>
<input type="file" name="images[]" id="image">
I figured I need to use jquery ajax on each "Upload image" button click to send image(s) to an upload script where I resize the image(s), upload (them) to server and return image(s) path to jquery as a response so I can show a thumbnail of the resized image(s). Same thing goes for drag and drop functionality, I listen for a 'drop' and send the dropped images to upload script.
Everything up until now I can get working without a problem, but the thing is I don't want to actually upload images to the server until user clicks a button to submit form once he's done with all the inputs. So my question is can I manipulate images in this way and instead of uploading to a server store them somewhere local until that final submit button is clicked?
I thought of a solution where I upload images to a "temp" folder on my server using ajax and then on form submit move them to "images" folder, and then set up cron to empty that folder once a day, but I would like to avoid that because a user can start filling out the form, upload some images, and then just before he clicks form submit cron steps in and deletes all of the images in "temp" folder and his images are lost.
I ended up creating a new file input via jquery each time a file is selected (on file input change), removing id from all previous file inputs and setting id="image" for that new one I create in order for it to still work when the label is clicked that attaches to it.
To show the preview thumbnail I use FileReader and set the uploaded image as a background to thumbnail div that I set up to be responsive 16:9 scale (padding-bottom: 56.25%). Actual image cropping will then happen on server once form is submitted.
I have a form with 2 file input which the user will select images to upload.
On submit when the images are uploaded, I first resize the image and merge it with another image using gd and this works fine.
What I want to do before the form is submitted, using Ajax on change of the file input, get the image, processes it on the server using gd (but not upload) and show the user the final result in a ui dialog for them to approve or not.
For reasons beyond my control I cannot use html5. I know you can't post files using Ajax and need to use jquery-iframe-transport or jquery-file-upload or some other plug-in like that.
What is recommended and how do I return the final image to display in the dialog, and if the user then click disapprove, how do I clear the file input field?
Thanks
Take a look at this: http://www.9lessons.info/2011/08/ajax-image-upload-without-refreshing.html
The above tutorial will show you how to do image upload using JQuery.
You can easily change the php file that handles the upload, show the image to the user, if they clicked disapprove, then simply remove the file from the server and start over.
I have a site where I would like to let users select multiple images to upload to the site, show them a preview of the images they uploaded and then give them the option to either change any of the images or to go ahead and upload them.
I would like for them to:
Select the images
Click a submit button and have the images save to a temporary location
Reload the page showing the images they uploaded with a "Change Photo" button next each photo
The user can click on the "Change Photo" button to have the page reload with an upload form so that the user can pick and upload a new photo to the temporary location and have it replace the photo in question
Or the user can click on the "Upload Photos" button to confirm the upload and have it save it in a permanent location
I am using php, but I don't mind a solution that involves javascript with php, as long as the above criteria is met. How can I save multiple images to a temporary folder to preview before confirming the upload?
Just a suggestion, you can use jQuery uploadify to upload multiple images through ajax and save in some temp folder, and again display these uploaded image which when confirmed by user to be upload then you can move those images to your destination folder deleting it from temp folder.
I'm wondering if this is possible: user uploads a picture which is then presented to him in the browser. The image is placed inside a div that has predefined image as background. User can drag and drop his uploaded image inside the boundaries of this div.
It would be something along the lines of uploading a pic of yourself and then positioning it against a background of a tropical beach. User then clicks ok and has the option to download the image.
I have the upload and JS drag & drop covered. I'm just wondering: is it the possible to create a new image on the server that exists of the back - and foreground image? So basically an image would have to be created from the contents of the specified DIV.
Yes it is possible using the functions of GD, you may also want to check out imageMagick
I am preparing a application in which i am asking user to upload his images and now i want that this images displayed when user log in and click on my photos link(in thumbnails).I think you got the idea.All is same like orkut..
Now what I can do in this is...
I can upload the file and can store it into hardisk into any folder(/htodocs/uploadedfiles) but i dont know how to display this hard disk stored image into my page like orkut does..
and then i want to provide a delete button at the bottom of each image so that if user want to delete uploaded image it get deleted from hard-sisk as well as from database..Give me idea about this also.BUt tell me how i can display an image on page which i have stored into hard disk..
After uploading the image file, store the image into require path using move_upload_file function. then store the image file path in database for that user.
Then, whenever you want that image, you use that image path for accessing the image in php.
For delete you can unlink function, Whenever delete link is get clicked, you call the unlink function with that image file path, it will get removed from your file system.