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.
Related
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'm making a custom website for someone and the site requires that new users be able to upload multiple photos.
I'm been looking at image uploading scripts, image host APIs, and making something from scratch.
I know how to upload a single image using forms and PHP, but I don't know the best way to do it for multiple images.
What do you recommend?
Also, if I made something from scratch or used a script, and the image was stored in a folder on my server, is that safe? (Can people upload malicious files and run them)
For a simple multi-uploading method you can use a multiple attribute on the input tag:
<input type="file" multiple="multiple" />
However, the user can only select files visible in the current folder view; usually just one folder.
If you wanted to be able to add more files, perhaps dynamically apply display:none; to the file input tag and add a new one in its place. To show which files have already been selected, list out the current files to be uploaded using javascript, as is seen here, multiple-file-upload.
Or skip the hiding step above so you have all the file upload forms visible at any given time, while dynamically keeping one blank one, so more files can be uploaded.
Be careful if you want valid XHTML/HTML as the multiple attribute is still part of the HTML5 speculation (SPEC).
Another alternative would be to use iframes and reload the iframe when a file is uploaded, so the user can instantly choose another file.
I personally never use Frames, so I have no idea how this might work.
The so called "AJAX file uploader" methods are also just a clever iframe trick from what I have seen.
The only other option I can think is to statically have a lot of <input type="file"/>s and hope your user needs no more than were provided.
I would personally just use the plain <input type="file" multiple="multiple"/> as I would assume that most user's groups of pictures they are trying to upload simultaneously would be in the same folder.
I needed to ask, what is the way when a user selects an image from input type='file' , file start uploaing via ajax, and display the image in a div. User dont need to press a submit button to intiate uploading.
Thanks -
Vivek Mishra
A View Source of one such site reveals
<input type="file" id="fileupload" onchange="uploadfile(this);">
Does that help?
this file will help you to do as you want: http://malsup.github.com/jquery.form.js on the other form you want instant image upload.. the examples you will found on http://jquery.malsup.com/form/#ajaxForm
You need a flash/silverlight/java based uploader which does it. There are several:
SWFUpload, Plupload, etc. They have pretty good documentation, with examples.
the basic method for an "ajax" upload, without using flash / silverlight is using a hidden iframe. just set the form's target to the name of the iframe.
Upload file without form
Yes i used the search button but i just couldn't find the solution i need.
Is there any way to upload a file so that user wouldn't need to press any form buttons?
My first idea was to use CURL but then i remembered that CURL is server sided.
I know it's possible thru Java and/or Flash but is there any way to do that using PHP & OR Javascript?
Edit:
Thanks for clearing this for me but...
But what about PHP based FTP upload?*
No, it isn't. That would have been a huge security hole. Your best bet is really an officially signed(!) Java applet. An unsigned or a manually signed one would still emit scary warnings to the enduser before proceeding.
I have found a solution. Copy does not take local files and the example of submiting the file does not work if it is local. What you have to do is:
file_get_contents("file:///C:\img.jpg")
then write to a text file the contents in the server (for example /uploads/img.txt) and rename to the same extension of the file to see the image.
It really works with any kind of file.
what do you mean without pressing any form buttons ?
well you could do a javascript document.getElementById('FORM_NAME').submit(); if you want some function in javascript to do the upload , where FORM_NAME is the id or your current html form .
but you CAN NOT make your webpage select the file to upload , you have to let the user select the file in an <input type="file"> element .
otherwise use a java applet
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/