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.
Related
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.
I am trying to upload file Jquery with ajax using php. If i passing Jquery data i not able to retrieve the file upload data how can i pass jquery file upload data to ajax. Kindly some on help me how can upload file through jquery ajax with php..
You cannot AJAX upload.
It's basically a fake AJAX to make it look like it is AJAX uploading.
In reality what happens is that the upload form is given a target of a nearby iframe. This makes it look like it is AJAX uploading when in reality it isn't.
The iframe is normally given a JS function within size of it that triggers a function in the parent windows which shows some kind of message say "Thank you for your upload".
Of course this is only really basic functionality and you'll need to Google search for more exampls, fortunately there are tonnes out there.
I have form that uploads file's perfectly, with a post-page-refresh-form.
However I have ajaxiefied the form with jquery's $.post
All of the data except for the file upload is saving nicely.
Is there somthing special I need to do to the form or in jquery to get the upload to work?
Thanks!
You cannot upload with javascript (it would mean granting js file access on your computer, a no go from security standpoint). Uploadify has a nice solution.
First off, I agree with Wrikken about Uloadify being a great solution.
But, yes, Javascript does not have access to upload files. There is a way around this by using Flash, but I would not go through all the trouble to build it yourself when there are other plugins out there that will take care of it all for you.
You can make it "lookalike" AJAX.
Use a hidden iframe and send your form into this iframe, you will be able to observe the onload of the iframe and get a response.
This way gives you also the option for an easy fallback if JS is disabled.
In a form in PHP, I have a textarea and a Choose File option. The code for Choose File is as below
<input name="upload_file" type="file" id="Browse" title="Browse" value="Browse" />
What I have to do is Choose a file and display its contents in the textarea, as soon as I select the file (No click event to happen).
How can I go about it? I am not very sure of how I can get a handle of the file object?
This is impossible using a file upload: You won't have "live" access to the file through JavaScript.
You would have to actually upload the file. You could then request its contents back in an Ajax request (or upload the file into a hidden iframe, output its contents there and grab them through JavaScript).
Flash can access files on the client's computer directly. Uploaders like SWFUpload use this to resize images on client side. If you're versed in Flash, it should be fairly easy to put something together.
you can't until the file is uploaded to/received by the server
You'll need to use an onChange event of the input field to trigger a submit (or an ajax request that uploads the file)... then PHP can read the file and rebuild the page (or send a response to the ajax request) to include it's content in the textarea
An example of how to do this
If you simply wish to display the file contents on the client side, before uploading to the server, you will need to implement Javascript and a Java Applet or ActiveX control (for security reasons).
The following pages may or may not be useful to you for more information:
http://timstall.dotnetdevelopersjournal.com/using_javascript_to_read_a_clientside_file.htm
http://www.html5rocks.com/tutorials/file/dndfiles/
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