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..
Related
I am making a simple image uploader.
I want it so:
An image is uploaded, it calls a php script.
The page is then refreshed
I am using a simple html form action. It does not refresh the web page after submission. To prevent the php script from overriding the web page, I put it in a hidden iframe.
I have never used javascript or ajax, so I am trying to avoid those solutions. This is a one-off for fun thing, so investing time into them isn't my goal.
<body>
<iframe name="votar" style="display:none;"></iframe>
<p class="standard_text_big" style="text-align:center"> No Pin Limit Will Stop Us!</p>
<p><form action="upload.php" method="post" target="votar" enctype="multipart/form-data" class="standard_text" style="text-align:center">
Upload a File:
<input type="file" name="the_file" id="fileToUpload">
<input type="submit" name="submit" value="Start Upload">
</form>
</p>
<div class = "image_format">
<picture class = "image_format">
<div id="img_embed"></div>
</div>
</picture>
</body>
EDIT Solved:
Instead of doing this in the html page, I have removed the hidden iframe so the php script does take over.
Then in the php script, after it executes, it sends you back to the html page.
Like so:
<p class="standard_text_big" style="text-align:center"> No Pin Limit Will Stop Us!</p>
<p><form action="upload.php" method="post" enctype="multipart/form-data" class="standard_text" style="text-align:center">
Upload a File:
<input type="file" name="the_file" id="fileToUpload">
<input type="submit" name="submit" value="Start Upload">
</form>
</p>
<div class = "image_format">
<picture class = "image_format">
<div id="img_embed"></div>
</div>
</picture>
Then in the php file:
if (empty($errors)) {
$didUpload = move_uploaded_file($fileTmpName, $uploadPath);
if ($didUpload) {
echo "The file " . basename($fileName) . " has been uploaded";
$command = escapeshellcmd('python3 /home/myfile.py');
$output = shell_exec($command);
echo $output;
header("Location: https://www.google.com"); /* Redirect browser */
exit();
I am trying to submit a form using PHP. I am trying to grab the value from two file inputs in my form, yet when I try to index them with my PHP code, I keep getting an error.
The error I get:
Undefined index: profile-pic in C:\xampp\htdocs\shareitme\form-test.php on line 5
Undefined index: cover-pic in C:\xampp\htdocs\shareitme\form-test.php on line 6
My Code:
<?php
if (isset($_POST['submit'])) {
$profile_pic= time() . $_FILES['profile-pic']['name'];
$cover_pic= time() . $_FILES['cover-pic']['name'];
}
?>
<form id="editprofile" method="post" action="<?php echo $_SERVER['PHP_SELF']
?>">
<input type="hidden" name="MAX_FILE_SIZE" value="5000000"/>
<input type="file" name="profile-pic"/>
<input type="file" name="cover-pic"/>
<input type="submit" name="submit" value="submit"/>
</form>
I know I have the names right, what am I doing wrong?
For uploading a file include enctype="multipart/form-data" in your form, like below:
<form id="editprofile" enctype="multipart/form-data" method="post" action="<?php echo $_SERVER['PHP_SELF']
?>">
The enctype attribute specifies how the form-data should be encoded when submitting it to the server.
For more info on forms : http://www.w3schools.com/tags/att_form_enctype.asp
For renaming a uploaded file, it better to upload it to server with move_uploaded_file and than rename it.
try:
<?php
if (isset($_REQUEST['go']) && $_REQUEST['go'] == "1") {
$profile_pic= time() . $_FILES['profile-pic']['name'];
$cover_pic= time() . $_FILES['cover-pic']['name'];
}
?>
<form id="editprofile" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<input type="hidden" name="MAX_FILE_SIZE" value="5000000"/>
<input type="file" name="profile-pic"/>
<input type="file" name="cover-pic"/>
<input type=hidden name="go" value="1">
<input type="submit" name="submit" value="submit"/>
</form>
Whenever you are want to upload file. you need to add enctype in from.
`enctype="multipart/form-data"'
This should work
<form id="editprofile" enctype="multipart/form-data" method="post" action="<?php echo $_SERVER['PHP_SELF']
?>">
What you're trying to do here, if I'm not mistaken, is upload images on your server, right? You can simply use a third-party upload tool for that. I'd recommend AjaxUpload as it is based on AJAX and pretty easy to implement.
For simplicity, I'm applying the upload functionality on one image. You can simply put it inside a function and reuse it.
<p id="showMsg"></p>
<input type="file" name="profile-pic" id="profilePic" />
JQuery:
$("#profilePic").ajaxUpload({
url : $_SERVER['PHP_SELF'],
name: "file",
onSubmit: function() {
$('#showMsg').html('Uploading ... ');
},
onComplete: function(result) {
$('#showMsg').html('File uploaded with result' + result);
}
});
PHP:
<?php
if (isset($_FILES))
{
$file = $_FILES['file'];
move_uploaded_file($_FILES["file"]["tmp_name"], 'upload_dir/' . $_FILES["file"]["name"]); // This function will upload the image to 'upload_dir' folder. You can modify it as per your requirements.
}
?>
1) if you are using file type then your form attribute should be enctype="multipart/form-data".
<form id="editprofile" enctype="multipart/form-data" method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
2) Before using your post value it is best practice to check whether its setted or not.
$pic=isset($_FILES['profile-pic']['name']) ? $_FILES['profile-pic']['name'] : '';
Use enctype="multipart/form-data" in form tag.
Whenever you want to post binary datas you must have to set this enctype attribute.
I'm trying to upload an image by submitting form. Following is my code snippet:
html:
<form method="POST" id="statusform" action="insertstatus.php" enctype="multipart/form-data">
<textarea name="statusText" onclick="javascript:this.value='';" class="retroText" style="width:600px;height:100px;font-family:lucida sans unicode,lucida grande,sans-serif;resize:none;padding:5px;">Post your crap here ...</textarea>
<input type="file" name="statusPhoto" accept="image/gif, image/jpeg, image/x-ms-bmp, image/x-png" size="26" />
</form>
jquery:
$("#statusform").submit(function() {
$.post($("#statusform").attr("action"), $("#statusform").serialize(), function(data){
alert(data);
});
//Important. Stop the normal POST
return false;
});
php:
if(isset($_FILES['statusPhoto']) && $_FILES['statusPhoto']['size'] > 0)
{
<Image Upload Code>
}
else
echo "Photo not submitted";
The message returned from ajax is: Photo not submitted.
Please help..!!
You are uploading, not the image, you uploading it name.
$("#statusform").serialize() return a string, image is a blob. Try to use some jQuery plugins, for example.
You can upload file asynchronously by iframe as described in article:
http://viralpatel.net/blogs/ajax-style-file-uploading-using-hidden-iframe/
I want to view data stored in an uploading session but all I get is 'Null', am I going about this the wrong way?
session_start();
if(isset($_POST['submit'])){
$target = "test/";
$target = $target . basename('test') ;
$file = ($_FILES["uploaded"]["name"]);
$key = ini_get("session.upload_progress.prefix") . $_POST[ini_get("session.upload_progress.name")];
var_dump($_SESSION[$key]);
if(move_uploaded_file($_FILES['uploaded']['tmp_name'], $target)){echo "done";}else echo "error";
}
and the html:
<form action="upload.php" method="POST" enctype="multipart/form-data">
<input type="hidden" name="<?php echo ini_get("session.upload_progress.name"); ?>" value="test" />
<input type="file" name="uploaded" />
<input type="submit" name='submit' />
</form>
You're trying to get upload progress status when upload is already done.
If you want to make it working, then you can for example send your form to iframe and during the upload ask server, using ajax, what is the status.
I would suggest to use it rather as a fallback for older browsers cause currently browsers are supporting ajax upload and you can display upload progress without making additional requests to server and creating some strange hidden iframes ;)
Ok so im making an image uploader with a chance to see what you are going to upload, before entering it into the database. My mind is kinda tired, could you please just get me through this one? thx (btw it doesnt work :p) Its on a clean page, i choose a file from my pictures on compouter, it doesn echo "hi wazzup
<?php
if(isset($_FILES['image'])){
echo "hi wazzup!";
}
?>
<form name="form" id="form" method="post" enctype="multipart/form-data" action="<?php echo $_SERVER['PHP_SELF']; ?>" >
<input type="file" name="image" onChange="if(event.propertyName=='value') {document.getElementById("form").submit();}">
</form>
See what is the output and you will know wheater your javascript is wrong or you should use $_FILES instead of $_POST for image
<?php
if(isset($_POST))
{
if(isset($_FILES['image'])){
echo "<span style=\"z-index:1000;display:block;\">hi wazzup!</span>";
}
echo "POSTED";
}
?>