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.
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.
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 implement copy clipboard image into webpage.
Ex. User click the printscreen button, opens a web page, clicks CTRL+V and the image is upload to the web page. Can it possible using jquery/javascript or PHP.
Is it possible in firefox?
Thanks in advance.
I'm afraid not, no. You'll have to have your users save the screenshot to disk and then either (a) select it from the disk using a <input type="file" /> element or (b) implement the HTML5 Drag n' Drop API, allowing the user to drag the file into the browser window.
I've been searching everywhere and can't seem to find an answer to this:
I'm currently working with the Instagram API. I have that all set so users can login and see all their photos. But, I'm creating a type of photo printing service for instagram so I want it so that when the user clicks the photo it uploads that photo to my server. I know how to do a PHP upload with an html form, but this is a strange case in which an html form is of no use to me. I guess I basically need the image to be selected and also act as the submit button at the same time? I'm not really sure, any help would be appreciated!
Have the link they click ping your server with the image's url so it can be downloaded
Similar answer to Mike B, but more flushed out:
You could render an invisible form for each image on the page. In each form, have an input field populated with the image URL you want to submit to your system. Use the image click event to submit the form it belongs to.
On the PHP server-side your script should receive the URL of the image and make a request to download it to the server. You can then do what you want with it.
That's one way. I can think of at least two more.
Update: There is simpler solution. See Mike's comment below.
I'm not familiar with Instagram API, but have the fallowing suggestion. As I understastand, by the Instagram API, the photos are displayed in your page - so you need some javascript to get there urls, and the image got to act as submit button '<input type="image" src="...the image source here.." alt="Submit button" name="i1">' ... . The PHP code would be something like that:
<?php
//original image
$img = $_GET["i1"];
//directory to copy to (must be CHMOD to 777)
$copydir = "/home/user/public_html/directory/";
$data = file_get_contents($img);
$file = fopen($copydir . "blah.gif", "w+");
fputs($file, $data);
fclose($file);
?>
Can you show us some code to help us get an idea of how you're currently displaying the images? I suppose you can always do something like <input type="submit" style="visibility: hidden;" /> and then add something like onClick=document.forms['NameOfThisForm'].submit(); to the <img> tag containing that particular image. This way, you'd have one form per image, and you could add additional hidden elements to pass on any further information to the server, e.g. the ID of the image that the user clicked.
I have a page on my http://localhost/user/profile.php. I want the users to add a link of their photo from the desktop. I donot want them to upload. and display the same.
The image is not displayed.
What exactly am I doing wrong here?
Thanks
Jean
how are you planning to store the path to the image, in MySQL or other?
You should be able to simply ask the user via a post/get method in a form, the file path using <input type="file" name="user_photo_path" id="user_photo_path" /> and then embed that variable in an image tag as:
<img src="<?=$userPhotoPath;?>" />
This should then display the image locally, but be mindful that if another user goes to this page to see that photo, it won't show as they are not on the same host.