POST image inside FORM tag - php

I want to post an entire IMAGE when SUBMIT button is clicked.
<FORM action=".." method=post>
<img src="...."/>
<input type="submit" value="Click"/>
</FORM>
Is it possible?
Please help me......
Thanks in advance.....

Are you looking to upload an image? If so, then you'll want the "file" HTML input element type:
<input type="file"/>
And include enctype="multipart/form-data" in your form tag.
Here's a basic tutorial and more info:
http://www.tizag.com/phpT/fileupload.php

if you want to post an image inside a form, you should have that image already on your server. In which case all you have to do is put a hidden element on the form with the location of that image and voila you have the image in the form
<input type="hidden" name="image_location" id="image_location" value="/images/bleh.jpg" />

You can do it like this:
<FORM action=".." method="POST" enctype="multipart/form-data">
<input type="file" id="file" placeholder="upload a file"
name="file">
<button type="submit">Submit</button>
</FORM>

Related

HTML form - keep reference to uploaded file for 2 button options

I have an html form and 2 php files, all of which work well. In the form I created a preview button that references a php file that shows the uploaded cvs in an html table as a preview. The submit button inserts it into a database.
I would like to have the form contain one button that goes to the preview page and once the info is confirmed, there would be another button that references the submitted file, but I can't seem to get that to work.
Due to the environment I'm trying to get this to work without javascript or ajax if possible, as another user gave me a javascript option.
Here is the html form:
<form method="post" action="confirm.php" enctype="multipart/form-data">
<label>Upload File</label>
<input type="file" name="file">
<input type="submit" name="submit" value="Confirm" >
</form>
<form method="post" action="upload.php" enctype="multipart/form-data">
<label>Upload File</label>
<input type="file" name="file">
<input type="submit" name="submit" value="Submit">
</form>
Each Php file corresponds as well:
if(isset($_POST['submit']))
Is there any way to go from upload to preview to submit and keep reference to $file?

after image upload in form want to show a thumbnail of image

simple question this time around...
So I have this code I managed to find and it works well for me. But I would like to add to it a thumbnail display of the image upon submission. Could anyone help me to figure out the code and how it will fit in to display a thumbnail? Please and thanks everyone.
Here is the jsfiddle for it.
HTML:
<form action="<?php echo $_SERVER['SCRIPT_NAME']; ?>" method="post" enctype="multipart/form-data">
File: <input type="file" name="file" style="width: 250px;"><br>
<input type="submit" name="submit" value="Upload File">
</form>
Just make and <img> tag with attribute src="$link" where $link is the link to the image.

Uploading files within a larger form (two forms on one page), how can I submit both sets of data (file and form) at once? (PHP)

I have a form such that a list of questions with inputs is followed by an invitation to upload files if they have them.
I have avoided nesting forms by popping up the form containing the upload. The difficulty is that if they press submit on the Uploader form, it will process the upload on the destination page, and likewise if they hit submit on the rest of the form, the uploads are not submitted.
How can I do both at once?
My code:
<form id="questions" action="page2.php" method="POST">
Question 1 <input name="q1"/>
Question 2 <input name="q2" />
Have any files to add? <button id="upload-button">Upload</button>
<input type="submit" value="Submit Answers" />
</form>
<div class="hidden">
<form id="fileupload" enctype="multipart/form-data" action="uploader.php" method="POST">
<input id="fileupload" type="file" name="files[]" multiple>
<input type="submit" value="Upload Files" />
</form>
</div>
jQuery will pop up the hidden div if someone presses the button to add files.
I don't have a problem with them being posted to the same place, but I tried using javascript to use the click event for each button to submit both forms and it did not work.
(Reading stack overflow later explained that only the last submission gets processed in this way)
Any ideas? Thanks
Very simply, structure your HTML like this, and process the logic from both page2.php and uploader.php in one shot (i.e. include the file-upload logic in page2.php). If you show us the contents of both of those files, I can show you how to combine them.
Also added labels with links to the associated inputs, and swapped the submit input for a button element.
<form id="questions" enctype="multipart/form-data" action="page2.php" method="POST">
<label for="q1">Question 1</label>
<input id="q1" name="q1" type="text" />
<label for="q2">Question 2</label>
<input id="q2" name="q2" type="text" />
<label for="fileupload">Upload a File<label>
<input id="fileupload" type="file" name="files[]" multiple />
<button type="submit">Submit</button>
</div>

Submit HTML form type file with AJAX

I have a form and a div. I want the user to select an text file and hit submit and that will populate the div with the content of the file. I would like to do that without having to refresh the page.
<form action="action.php" method="post" enctype="multipart/form-data">
Click the "Choose File" button and browse for the file to import.<br /><br />
<input type="file" name="filelocation" value="Browse" /><br />
<input type="submit" name="submitform" value="Submit" />
</form>
<div id="filecontent">
</div>
There is no easy way to submit/upload the files via ajax. However, you can go for the jQuery Uploadify plugin to the trick for you.
Uploadify is a jQuery plugin that
integrates a fully-customizable
multiple file upload utility on your
website. It uses a mixture of
Javascript, ActionScript, and any
server-side language to dynamically
create an instance over any DOM
element on a page.
Theres is no easy way to do that, but u can use an Iframe with an ajax call to get your file to the server and work with it the normal ajax way
<form action="upload.php" method="post" enctype="multipart/form-data" target="upload_target" onsubmit="startUpload();" >
File: <input name="myfile" type="file" />
<input type="submit" name="submitBtn" value="Upload" />
</form>
look at target="yourhiddeniframe"
here is a complete howto:
http://www.ajaxf1.com/tutorial/ajax-file-upload-tutorial.html
greetings

Upload files, form within form

Hello everyone and thanks in advance.
I have a problem and I have 2 form into one another, the domestic form is to perform a file upload.
As I can do to make when sending in internal form not run the main form.
<form name="x" method="post" action="xxx.php">
....
<form action="" method="post" enctype="multipart/form-data" target="xxx">
<input type="file" />
<input type="submit" />
</form>
<iframe id="xxx" src="process.php">
</iframe>
....
<input type="submit" name="pro" value="Register user"/ >
</form>
Doing this does not work, as this within another form.
Any help or possible solution.
Forms cannot be nested. That's simply is not allowed in HTML and if you do so you might get undefined behavior which could vary between browsers. So try removing the inner form and put the enctype on the outer form.

Categories