i have a form with a Photo Upload Input. I want the picture to be uploaded before submitting the form to speed up the submit.
the form should be able to upload multiple files and should show a progressbar + preview.
how i can do this?
MetinKale38
You can do this pretty easily now in HTML5 using XMLHttpRequest with a multipart form and the file element. XMLHttpRequest now supports progress events which you can handle in your Javascript code. Here is a link to an excellent article with detail and code examples http://www.matlus.com/html5-file-upload-with-progress.
Note that your PHP code must still treat each file independently, but that is transparent to your JavaScript - it will simply make multiple posts to the server.
Related
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'm trying to implement drag-and-drop file selection for uploading files synchronously once the form is submitted. I know how regular file uploading works with HTML and PHP. And I want to be able to process the files in PHP alongside the ones in the $_FILES array.
I've done some research and looked at several plugins but pretty much all of them either upload files once they're dropped into the window or don't use conventional html forms.
Any kind of help like ideas, snippets or plugins would be appreciated.
Thank you!
It is impossible to set the files attribute of a file input via JavaScript for security reasons. See this jsfiddle.
So, you cannot select files for a file input via drag and drop, you have to select the files via the file input directly, by clicking on the 'browse files' button.
What you can do is to implement an onUpload method for the form, to upload the files when the user clicks the submit button, via AJAX. Then, when the uploads are completed, you submit the form with the other data.
See this fiddle to see how to upload files via AJAX. The code has the drag and drop processing and converting binary files into BASE64. You will need to create the AJAX bit by posting the data. To check if the files are done, create a function to be called with setInterval, to check if all the uploads completed.
Cheers,
Apoc
I am writing a small e-commerce website and I need to be able to allow users to upload their own custom images (limited to JPG or PNG) before they add to basket so that the images can be included with the order.
My current idea is to upload the files via AJAX and insert the filenames into the database so I can then link the images to a product and a specific order in the database. However, I have read that you cannot easily do this with AJAX as it is not yet supported?
Should I literally use a normal file upload form and process the $_FILES and $_POST requests after the form is submitted. This is already being done when items are being added to the basket so would be possible, although this could take a while to process the uploads.
Am I missing an obvious method that will solve the problem?
You need to post the form to a hidden iframe, output a json response to the iframe and then parse the response via javascript.
Started with ajax last week. How would I upload an image using it. What I want to do is upload an image. I would imagine using input type="file" then the PHP file needs to collect the URL of the newly uploaded image. And return it to the ajax function to put the URL inside an <img src"" >
How would one do that.
Any ideas?
Marvellous
I would recommend Valums ajax upload script. If it comes across a browser that does not support upload via ajax it will gracefully handle them via hidden iframe uploads
Note: IE (all flavors) does not support file uploads via ajax and will therefore default back to iframe upload.
You can't send files through AJAX consistently. You will need to submit your form into a hidden iframe to simulate an AJAX transaction. Using an iframe ensures that your application will be compatible with all browsers - particularly the IEs.
After digging through my bookmarks a simple script to facilitate this might be found with http://valums.com/ajax-upload/ but I have not used it.
I need to post a form which includes personal details and I need to upload an attachment file also I need to achieve this using AJAX.
How can I upload a file using AJAX , I need to post the personal detail as well as upload a file at the same time using AJAX , how can I do this?
You can't upload files with AJAX because you can't do multi-part encoded requests - that's a limitation of the XMLHttpRequest API.
Workarounds for this typically involve using an IFRAME that is the target of a form that handles the actual file upload as a separate sub-process to the overall form. The response loaded in the IFRAME then communicates back to the DOM in the parent/calling page with information about the uploaded file.
If you add a hidden iframe on the page
<iframe name="iframe1" ... />
And the change the target on your form to post to the iframe
<Form traget="iframe1" ...>...</form>
You can upload and post the data to the page. You can also use javascript (JQuery) to get hook into the events of the iframe.
To get a upload progress meter, use the php uploadprogress module. It works great!
http://pecl.php.net/package/uploadprogress
and
http://bluga.net/projects/uploadProgressMeter/
Here is a link i found that may help:
http://www.finalwebsites.com/forums/topic/php-ajax-upload-example