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/
Related
i created PHP form for my site, with image upload option on it.
but it only show the image name before image submitted, but i want to view/preview the image/file before submit so how this possible in this?
"file36":{"label":"Select/Upload a Student's Photo","accept":"jpg|jpeg|png|gif|bmt","files":true,"attach":true,"database":true,"maxbytes":204800,"fieldtype":"fileupload","required":true,}},
As far as I know this is not possible with php until you upload the image.
However, you are able to do so with jquery.
Check out http://blueimp.github.io/jQuery-File-Upload/
The old way is to upload the image to a temp folder, create an iframe and load the response there. Then link the temp image from the iframe to a hidden field in the final form with JavaScript. When you submit the form place the image in the right folder. Finally run a cron job every 24-48h to empty out the temp folder.
The new way is the File API supported in IE10+ and all modern browsers. Fallbacks in Flash and Silverlight exist for older browsers.
You obviously misunderstand how file uploads w/ PHP work.
PHP is server side programming language, meaning, it can only execute and access scripts, that are on the server. So, for PHP to access / analyze a picture in any way, it has to be on the server already.
You can upload the file in a temporary directory, analyze it and, if it suits your needs, move to a permanent folder. Otherwise, just delete it.
Previously i have performed submitting html page's data to php page by ajax using get or post method.Now i want to know suppose my html page have an input tag of type file in following way
<input type="file" name="image_file" id="image_file" />
<input type="button" id="btn_crop" onclick="btbn_click()" />
Now i want to perform that after clicking the button the file will be transferred to "crop.php" by ajax.I don't want to use the ajax file upload cause i wish to perform the cropping before storing the file in server hard disk page.Now can any body give me suggestion about this?
You might find this Nettuts+ tutorial helpful. That's for uploading files with AJAX. Now, when the file gets transferred to your server, it is automatically stored in a temporary directory, from where you can move it after cropping it and whatsoever. If you want, you can also try deleting it afterwards, I don't know.
Try the GD functions for cropping. A good search will do the trick.
Hope I helped.
I want to have a single button that when clicked opens a file dialogue, and then after the user selects the photo they want to upload and the dialogue closes. I want the photo to upload. I cant think of a way of doing this because in the form you cant use both the type = file and type = submit together. Would I need to use jquery to achieve this? Thanks.
Yes, the idea is to use jQuery for the inital part of having a user pick a file to upload... and then some sort of other, server-side language (like PHP,) will actually do the heavy lifting (by actually uploading the file.)
Here's a jQuery plugin that helps you do this:
http://blueimp.github.com/jQuery-File-Upload/
EDIT:
Yes, I believe with jQuery (or some other library... or plugin,) it would be possible to have an event listener (or something,) pick up when a user browses for a file to upload... and automatically starts to upload it once the file has been chosen. But, again, as was said earlier, it's probably safer to take a two-step approach to file uploads for now.
try this
One-Click Upload is a jQuery plugin that replaces the standard file
input element, allowing you to use any link, image or element to be
used for the purpose of bringing up the "file browse" dialogue. It
completes the upload behind the scenes without refreshing the page,
making it less obtrusive and easier to style than a standard upload
form.
To get the upload started the way you describe you will need to use JavaScript. jQuery is a very good library to use to make that process easier, but it is not required.
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