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.
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 built a blog system where each entry has an associated image file. I have created a php upload for this system and can get everything onto the server. When I write each blog post I have a row in my database which stores the filename of the image, so I could, if I knew the filename already, just type it in.
What I want to do is on my blog post form, instead of being able to type the file name, I want a button to click on which opens a window with all my images in it, then I can click on one and have that filename sent back to the form.
I suppose I could use AJAX to do this but it seems over complicated. Does anyone know of a good way to achieve this.
I'm using Codeigniter. I need to upload Avatar image for my site. I need to upload image with Ajax and Jquery. But NO need Submit button. When I click upload->open it's directly goes to upload via ajax/jquery.
Here after only im going to start my code. If you want sample code, use this link.
Note: (looks & functions) It's should same for all browser.
and I don't want any uploader package.
Thanks...
I am using PHP5 and I want to create multiple file uploader of type Image, in such a way that user could select different images while holding Ctrl button and click mouse left button (While user doing so all images will push in an array) and when ever he click to Uplaod button then all images would be upload.
This can't be done using a normal upload dialogue: It supports only one file at a time (this changes in HTML 5, but it isn't there yet). Take a look at Flash based uploaders like SWFUpload or Uploadify.
Have a look at:
Upload Multiple Images at Once using PHP
I am using class.upload.php to handle an image upload from a form that submits employee details to a MySQL database. class.upload.php does EXACTLY what I want it to do, resize the image and rename it - what I am now trying to accomplish is to upload via Ajax after the user selects the file and then display it in the form while they continue entering details. How would this best be accomplished with jQuery?
I have used Uploadify to serve this purpose on several websites. It works quite well once you get the hang of it.