What I want
I want to upload a file without reloading the page, also I want to add the source link for the image to the textarea.
So when I push the upload_photo, the image uploads and a link is added to the textarea.
I want pure HTML, Javascript|AJAX and PHP.
What I have
<form action"index.php" method="post" enctype="multipart/form-data">
<textarea id="textarea" name="text"></textarea>
<input type="file" name="photo" />
<input type="submit" name="upload_photo"/>
<input type="submit" name="post"/>
</form>
Example sites:
http://www.friendfeed.com - the page don't reloads when you upload the files
What I don't want
Please avoid posting solutions with jQuery or any library, API.
That's easy.
Put an iframe, give it a name, for example "MyIframe".
Then in the form, add the TARGET attribute, with the value "MyIframe", and the action - the script that takes the upload (takeupload.php for example)
In the main page define a Javascript function that does something you need after the upload is done, which will be called, with parameters, from the page generated by takeupload.php.
in takeupload.php upload the image, then send as an output a normal blank HTML page that will execute a script which will call the method described above, with a set of parameters you need (image name, path, error, or plain HTML to insert somewhere, etc.).
use it like this:
<script type="text/javascript">
parent.YourJSMethod(parameters);
</script>
The page will be loaded in the iframe, and it will run a function defined outside the iframe. Upload is done, and the parent page receives data about the result.
This is fairly simple. No jQuery needed, no AJAX, no nothing, just a very simple Javascript code and a little HTML.
This can indeed be done with AJAX. I don't think that using AJAX is any more of a security risk than sending a vanilla HTML form; you will have to validate all user input on the server side all the same. Here's a simple example:
http://www.webtoolkit.info/ajax-file-upload.html
Related
I have this Html code and I try to save my record in DB
<div>
<p> Item Name :
<input type = 'text' id = 'ItemName' />
</p>
<p> select Image :
<input type = 'file' id = 'Image' />
</p>
<input type='button' id ='btnSaveItem'>Save </input>
</div>
How can I upload a picture and save it using Jquery and PHP?
I have not been able to find a Jquery method to upload an image, but I need to do without a page refreshing.
Normally you just can't upload images via Ajax, you will need workarounds.
I use this jquery plugin, it's easy to use and you don't need to code almost nothing: http://malsup.com/jquery/form/
Not sure if it's possible, but seems to me like every other jquery post-without-refresh :) Put names in the desired fields, not only id's. Then post to a specific .php page the desired data via jquery, and make your upload logic there. The correspond will be between your jquery and .php page, so no refresh will be done. The text field you can get with the $_POST superarray in php, and the file with $_FILE.
This can be uploading with out refreshing using uploadify,
refer http://www.uploadify.com/demos/
I've recently added an answer for a similar question. Please take a look at this:
Upload image using jquery
It uses $.ajax to upload a file.
My question is should I convert two html pages to php pages, so the called page can access its POSTed parameters, or is there a way for a called html (.html extension) page to access posted parameters?
I've been reading that because posted parameters are server-side there is no way for JavaScript to do this being client side. I've seen nothing about one html page accessing
parameters if that .html page was accessed via a POST.
Here is my calling form. The called form, needs access to TransDesc (below), which is a text field.
<script type="text/javascript" language="JavaScript1.2">
// Check where we came from so that we can go to the right spot when the
// form gets posted from outside of our HTML tree.
var PostURL = '/event.html';
</script>
Enter a Donation Amount
<script type="text/javascript" language="JavaScript1.2">
document.write(
'<form name="InvGenPayDonation"
action="'+PostURL+'"
onsubmit="return validateForm();"
method=POST>');
</script>
<p> $ <input type='text' name='Amount' value="0.00">
</p>
<p>In honor of <span style="color: #FF0000">
<input type='text' name='TransDesc' id='TransDesc' value="" >
</p>
<input type="submit" value="Next"> <br /><br />
A static HTML file cannot access variables that have been POST'ed to it. It can't even know they're there as they're sent to the server in the HTTP request, the server then deals with them and sends the HTML page in the HTTP response. They're 'consumed' before the page is even sent to the client.
You could use GET and access them via JavaScript, or configure Apache to server .html files as PHP files instead though.
In my opinion, php is the easiest way to go, and as far as languages go is pretty easy to learn and pretty intuitive.
You'll have to either convert them to PHP or use GET instead of POST, as GET parameters are accessible through window.location.href
Yes, I would recommend converting the pages to php. If you are set on using HTML files you will have to edit your htaccess file to run HTML pages as php.
You can always use ajax to retrieve and send post and get values.
You can retrieve it with js by creating a php file and access those with ajax from your html files.
I have a form, on its action i have a php file, i want that when i click submit, it should first open the action php (means view in browser), and then start executing the code in it.
form tag is like this
<form action="myScript.php" method="post"></form>
right now what happen is, when i click submit, it stays on the same page and start executing the php file, when it is done then, then it shows the script file page in browser.
you can use jquery POST and do what ever you want:
jQuery.POST
Is the <input type="submit"> tags etc. inside the <form> tags. If not, then the input buttons are pointless, and just return false.
Your code should look like this:
<form action="myScript.php" method="post">
<input type="submit" />
</form>
Does this help?
Kai :-)
You have to execute the PHP in order to generate the page that is shown in the browser as a result of the POST. Even if your PHP is generating the page and then performing a long operation, output buffering and compression will defeat you, so you will need to turn them off. See How to flush output after each `echo` call? for other things you may have to do to get your output to appear immediately.
I have the following form in a file called "foobar.html":
<!-- other stuff -->
<form method="post" action="foo.php?cat=1">
<input type="text" name="bar" />
<input type="submit" value="foobar" name="foobar" />
</form>
<!-- other stuff -->
And I open this file in a php script with fopen, how do I fill out and submit this form without any input from the user? Thanks
Parse out the action attribute with a HTML parser, and use curl to perform a POST to the appropriate target URL.
Read the entire fire into a variable. Rather than using fopen you might want to consider file_get_contents for that, it's a bit cleaner.
You'll then want to parse that string as HTML. You could use PHP's DOMDocument for that. Get the action and method of the form by traversing the DOM tree to the form tag and reading out those attributes. Next get the names of any inputs within the form tags. Use those names to generate a query string with your key=value pairs. If the method of the form is GET, then append that query string to the form action, otherwise save it in another variable.
Finally, use CURL to "submit" the form. That is, use the form action as the URL for a CURL request. If the form method was GET, you should have already appended the data to the URL, if the method was POST, you'll want to set the data for the CURL request to the data query string you generated from the form names.
If your question extend to how to know what data to fill into what form fields, that is pretty much impossible to solve. Certainly there are some input names you could look for and guess the required data but a universal solution is an impossible problem to solve.
Are you trying to have the user submit the form on their browser, without user interaction? If that's the case, you'll need to resort to javascript, something like:
<body onLoad="document.getElementById('autoSubmit').submit();">
<form id="autoSubmit">
(insert form here)
</form>
</body>
This will automatically submit the form. Some notes: not everyone has JavaScript enabled, so you might want to change the inputs to type="hidden", as well as add a nice big submit button that says Click Here.
I have a <div/> tag which contains a file upload <input id="file" type="file"/> tag. I want to post the contents of the input tag to a php page using $.ajax() or $.post() but how do I grab the contents of the input tag having its type as "file"? so I can submit it using the jQuery ajax functions?
Note: My code doesn't have a <form/> tag yet. I am not sure if its mandatory to upload files. Also i've seen some workarounds using <iframe> I want to know if this can be done otherwise.
I don't want to use any plugins to do this.
A byte stream can't be part of an asynchronous request.
In other words, you can't send data using AJAX approaches.
you can't send file through $.post...
you can use this link to uplaod file through ajax..
http://www.uploadify.com/demos/