How can i send image from the client side to server?
i have a simple form like :
<form>
<input type="file" id="myfile" name="myfile" />
<input type="button" value="Submit" onclick="SendImageToServer();" />
<iframe id="uploadframe" name="uploadframe" src="upload.php" width="8" height="8" scrolling="no" frameborder="0"></iframe>
</form>
And in the method i am using is :
function sendImage(){
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//I want to get the response as simple <img scr="myimage"/>
}
Can anyone help me how can i do this using Ajax-php.(NO JQUERY)?
Well, for one thing you cannot send files with AJAX. But if you are submitting to an iframe, then the form needs to have enctype="multipart/form-data" defined, otherwise it does not submit files.
You should not use AJAX term as you won't be creating one. To upload the file set an action and target on form and everything else should be automatic, that is, in-page.
<form action="upload.php" target="uploadframe" enctype="multipart/form-data">
... everything else here
<input type="submit" value="Go!"/>
</form>
Hope this helps...
Related
I'm trying to work with ajax. I have two pages: request.html and reply.php.
request.html:
<html>
<script language="javascript">
var xht = new XMLHttpRequest();
function testAJAX()
{
xht.open("get","http://localhost:9999//a.php", true);
xht.send();
xht.onreadystatechange=function() {
if (xht.readyState==4) {
alert("Text: "+xht.responseText);
}
}
}
</script>
<form id="form1" name="form1" method="post" action="">
btn
<input name="btn" type="submit" id="btn" onClick="testAJAX();" value="Submit" />
</form>
</html>
reply.php:
<?php
echo 'hi';
?>
The problem is that I don't get a response via xht.responseText and with xht.responseXML I get null and with xht.status I get 0.
I asked the link http://localhost:9999//a.php via browser and got hi correctly.
P.S: I tried this on Chrome 29.0.1547.18 and Maxthon v4.1.1
any ideas..
You don't need to mention "http://localhost".
The main mistake is you have given the input type as Submit If it is submit the form will be submitted first the click event will not trigger. Change the input type to button.
If you want to do form submission do it in java script
The corrected code is below.
<form id="form1" name="form1" method="post" action="">
btn
<input name="btn" type="button" id="btn" onClick="testAJAX();" value="Submit" />
// change type to button
</form>
var xht = new XMLHttpRequest();
function testAJAX()
{
xht.open("get","a.php", true); /// Change to a.php
xht.send();
xht.onreadystatechange=function() {
if (xht.readyState==4) {
alert("Text: "+xht.responseText);
}
}
}
Adding to SarathPrakash's answer, I would like to point out that there is nothing wrong with specifying localhost. It will still work as long as the PHP file's address is valid.
You can also have the submit button. But you'll have to modify the form opening tag as follows:-
<form id="form1" name="form1" method="POST" action="" onsubmit="return false">
This is will stop the default behaviour of the form being submitted. Although in my opinion, it is best to avoid it altogether, and just stick with assigning the correct event handler to the onclick attribute.
Also, it is good practice to follow the correct syntax for HTML documents.
<html>
<head>
<title> Your title here </title>
<script type="text/javascript"> Your script here </script>
</head>
<body>
Your main document text here. Forms, tables etc.
</body>
</html>
For a simple tutorial, you could try this.
I want to write a php page in which there is a html form. I want to send all input (number for example) of my form to a php function (instead of a javascript function; I make this to hide my javascript function code).
How can I send input value to php function?
Is it possible to call the php function through onclick="function(param1, param2)"?
I know that javascript is a client-side language while php is server-side.
If it is possible, how can I write the return of the function in an input field?
I want to remain in my page.
Is it correct - action="#"?
My code is:
<form action="#" method="get">
Inserisci number1:
<input type="text" name="val1" id="val1"></input>
<?php echo "ciaoooo"; ?>
<br></br>
Inserisci number2:
<input type="text" name="val2" id="val2"></input>
<br></br>
<input type="submit" value="send"></input>
</form>
Help me in the implementation of the simple php function and in the passage of values from input to function!
Thanks!
Make your action empty. You don't need to set the onclick attribute, that's only javascript. When you click your submit button, it will reload your page with input from the form. So write your PHP code at the top of the form.
<?php
if( isset($_GET['submit']) )
{
//be sure to validate and clean your variables
$val1 = htmlentities($_GET['val1']);
$val2 = htmlentities($_GET['val2']);
//then you can use them in a PHP function.
$result = myFunction($val1, $val2);
}
?>
<?php if( isset($result) ) echo $result; //print the result above the form ?>
<form action="" method="get">
Inserisci number1:
<input type="text" name="val1" id="val1"></input>
<?php echo "ciaoooo"; ?>
<br></br>
Inserisci number2:
<input type="text" name="val2" id="val2"></input>
<br></br>
<input type="submit" name="submit" value="send"></input>
</form>
You need to look into Ajax; Start here this is the best way to stay on the current page and be able to send inputs to php.
<!DOCTYPE html>
<html>
<head>
<script>
function showHint(str)
{
var xmlhttp;
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","gethint.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<h3>Start typing a name in the input field below:</h3>
<form action="">
First name: <input type="text" id="txt1" onkeyup="showHint(this.value)" />
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>
This gets the users input on the textbox and opens the webpage gethint.php?q=ja from here the php script can do anything with $_GET['q'] and echo back to the page James, Jason....etc
This is pretty basic, just put in the php file you want to use for processing in the element.
For example
<form action="process.php" method="post">
Then in process.php you would get the form values using $_POST['name of the variable]
No, the action should be the name of php file. With on click you may only call JavaScript. And please be aware the hiding your code from the user undermines trust. JS runs on the browser so some trust is needed.
You can write your php file to the action attr of form element.
At the php side you can get the form value by $_POST['element_name'].
you must have read about function call . here i give you example of it.
<?php
funtion pr($n)
{
echo $n;
}
?>
<form action="<?php $f=$_POST['input'];pr($f);?>" method="POST">
<input name=input type=text></input>
</form>
I am using this reference
http://www.openjs.com/articles/ajax/ajax_file_upload/response_data.php
for ajax uploader ,its working absolutely fine for single upload but i want to convert this script into multiple upload with the help of your guidance also helps are definitely appreciated..
I just want to know how do i target a multiple iframe with the using of single form. Current script is target on a spacefic formId like this and this form contain only one input file...
Code
<script type="text/javascript">
function init() {
document.getElementById("file_upload_form").onsubmit=function() {
document.getElementById("file_upload_form").target = "upload_target";
document.getElementById("upload_target").onload = uploadDone;
}
}
window.onload=init;
<script>
<form id="file_upload_form" method="post" enctype="multipart/form-data" action="http://www.appifylabs.com/web/php-upload-progress-bar/uploaderSecond/upload.php/">
<input name="file" id="file" size="27" type="file" multiple="multiple"/><br />
<input type="submit" name="action" value="Upload Image" /><br />
<iframe id="upload_target" onload="uploadDone()" name="upload_target" src="" style="width:600px;height:600px;border:1px solid #ccc;"></iframe>
</form>
Attempt didn't work
<script type="text/javascript">
function init() {
document.getElementById("file_upload_form").onsubmit=function() {
document.getElementById("file_1").target = "upload_target_1";
document.getElementById("file_2").target = "upload_target_2";
}
}
window.onload=init;
<script>
Notice
I don't want to use any third party uploader like uploadify,JqueryUploader,Valum etc only the reason for learn
Each form can have only one target. And target is a property of the FORM element, not the INPUT ones (you tried above).
One possible solution is to clone the form using Jquery, set the corresponding target to the required IFRAME and submit each clone.
I am trying to find example code to upload files asyncronously (via Ajax) in IE8. Also upload progress would be nice, but not mandatory. Id like PHP code to be able to deal with the file server side. I keep coming across examples for other browsers using FormData, but I cannot use that. Could any body please point me in the right direction?
This is a good tutorial on the subject: http://hungred.com/how-to/tutorial-easiest-asynchronous-upload-file-ajax-upload/
HTML:
<form id="my_form" name="form" action="upload.php" method="POST"
enctype="multipart/form-data" >
<div id="main">
<input name="my_files" id="my_file" size="27" type="file" />
<input type="button" name="action" value="Upload" onclick="redirect()"/>
<iframe id='my_iframe' name='my_iframe' src="">
</iframe>
</div>
</form>
JS:
function redirect()
{
//'my_iframe' is the name of the iframe
document.getElementById('my_form').target = 'my_iframe';
document.getElementById('my_form').submit();
}
PHP:
$uploaddir = '/images/';
$uploadfile = $uploaddir . basename($_FILES['my_files']['name']);
if (move_uploaded_file($_FILES['my_files']['my_name'], $uploadfile)) {
echo "success";
} else {
echo "error";
}
That will get you started =)
User this http://jquery.malsup.com/form/#file-upload jquery plugin..Its best and tested..
I need jquery to check if my posted filename (up_image) is empty or not.
if it's empty i need a div tag to be shown and come with some kind of alert message.
if not, just do the
$("#submit").submit();
<form action="/profile/" method="post" enctype="multipart/form-data" id="submit">
<p>
<label for="up_image">image:</label>
<input type="file" name="up_image" id="up_image" />
</p>
Upload
</form>
$(function() {
$("#post_submit").click(function() {
var fil = $("#up_image");
if($.trim(fil.val()).length == 0) {
alert("Choose a file!");
fil.focus();
return false;
}
$("#submit").submit();
});
});
1: use a standard submit button to submit your form rather than a javascript-dependent link, for accessibility reasons, and to prevent brokenness if someone tries to right-click-open-in-new-window or other similar action on the link. If you want it to look like a link, you can still use a button, just apply some CSS to make it no longer look like a button.
2: use the form.onsubmit event to do validation rather than relying on a submit button click (forms can also be submitted by pressing enter, which may not always generate a button click)
<form id="uploadform" method="post" action="/profile/" enctype="multipart/form-data">
<p>
<label for="up_image">image:</label>
<input id="up_image" type="file" name="up_image" />
</p>
<p>
<input type="submit" value="Upload" />
</p>
</form>
<script type="text/javascript">
$('#uploadform').submit(function(e) {
if ($('#up_image').val()=='') {
alert('Please choose a file to upload.');
e.preventDefault();
}
});
</script>