PHP Ajax Parameter on Upload not set? - javascript

I try to do a simple simple upload but i guess iam too dumb or its too late here.
I searched a bit and founded this here on Stack
HTML
<form id="fileinfo" enctype="multipart/form-data" method="post" name="fileinfo">
<label>File to stash:</label>
<input type="file" name="file" required />
</form>
<input id="uploadBTN" type="button" value="Stash the file!"></input>
<div id="output"></div>
JS
$("#uploadBTN").click(function(event) {
var fd = new FormData($("#fileinfo"));
//fd.append("CustomField", "This is some extra data");
$.ajax({
url: './ajax/upload.php',
type: 'POST',
data: fd,
success:function(data){
$('#output').html(data);
},
cache: false,
contentType: false,
processData: false
});
});
PHP
if(isset($_POST['file'])){
$filename = $_FILES['file']['name'];
if(isset($filename) && !empty($filename)){
echo 'sup my man?!';
}else{
echo 'please choose a file';
}
}else{
echo 'not set';
}
The Problem with these Stuff is its saying not set so? With GET Method its same cause i tested mostly everthing out.
And no i dont want to use any plugin or something else :)
My Question is how can i access correctly the File ?
Or if this Lines of Code are totally Crap what is a other solve?
Thanks!

Try this, It works for me.
$("#uploadBTN").click(function(event) {
event.preventDefault();
var tmp_form = $("#fileinfo")[0];
var fd = new FormData(tmp_form);
$.ajax({
url: './ajax/upload.php',
type: 'POST',
data: fd,
async: true,
success:function(data){
$('#output').html(data);
},
cache: false,
contentType: false,
processData: false
});
});
<form action="" method="post" enctype="multipart/form-data" id="fileinfo">
<input type="file" name="file" required >
</form>
<input id="uploadBTN" type="button" value="Stash the file!"></input>
<div id="output"></div>
if(isset($_FILES['file'])){
$filename = $_FILES['file']['name'];
if(isset($_FILES['file']['name']) && !empty($filename)){
echo 'sup my man?!';
}else{
echo 'please choose a file';
}
}else{
echo 'not set';
}

Related

Php Ajax file upload, always getting undefined index error

Submitting file through ajax not working. I have followed other posts to create this but it appears formdata is not containing the file as a result i always get the error of undefined index 'image'
<form enctype: 'multipart/form-data'>
<div class="add_category">
<label style="font-size:20px;">Add categories</label>
<input type="text" name="category" id="category" placeholder="Enter Here" style="border-style:solid;height:30px;">
<label style="font-size:20px;">Choose image</label>
<input type="file" id="file" name="image" style="border-style:solid;height:25px;">
<button name="add_category" type="button" onclick="addcategory()" >ADD Category</button>
</br>
</br>
</div>
</form>
function addcategory(){
//var1=document.getElementById("category").value;
var formData = new FormData();
formData.append('image', $('input[id=file]')[0].files[0]);
$.ajax({
url : 'performcategoryserver.php',
type : 'POST',
enctype: 'multipart/form-data',
data : formData,
processData: false, // tell jQuery not to process the data
contentType: false, // tell jQuery not to set contentType
success : function(data) {
alert(data);
}
});
}
performcategoryserver.php:
<?php
$imagename=$_FILES['image']['name'];
echo($imagename);
?>
This always return undefined index image error ,please help.
Change
<form enctype: 'multipart/form-data'>
to
<form id="myform" enctype= 'multipart/form-data'>
Change your function to:
function addcategory(){
var formData = new FormData( $("#myform")[0] );
$.ajax({
url : 'performcategoryserver.php',
type : 'POST',
data : formData,
async : false,
processData: false, // tell jQuery not to process the data
contentType: false, // tell jQuery not to set contentType
dataType:"json",
success : function(data) {
alert(data);
}
});
}
Your form tag opened in wrong way firstly can you fix that and try again ?
<form enctype: 'multipart/form-data'>
Should be
<form method="post" enctype="multipart/form-data">
Finally found the working code,
Changed this:
<form id="myform" enctype= 'multipart/form-data'>
Changed this:
function addcategory(){
var formData = new FormData( $("#myform")[0] );
var xhr = new XMLHttpRequest();
// Open connection
xhr.open('POST', 'performcategoryserver.php', true);
// Set up handler for when request finishes
xhr.onload = function () {
if (xhr.status === 200) {
//File(s) uploaded
alert(xhr.responseText);
} else {
alert('An error occurred!');
}
};
// Send data
xhr.send(formData);
}

How to upload image using php , ajax on onchange event

I am uploading an image on onchange event using jquery ajax and php , the code is working but , but it is not uploading the image , showing undefined index photo on other page
index.php
<form id="reg" method="POST" enctype="multipart/form-data">
<div class="form-group">
<input type="file" name="photo" id="photo" onchange="myfunction(this.form);" >
<span id="photoid"></span>
</div>
</form>
<script>
function myfunction(theForm) {
var formData = new FormData(this);
$.ajax({
type: 'POST',
url: 'regimg.php',
data: formData,
success: function (data) {
$('#photoid').html(data);
},
cache: false,
contentType: false,
processData: false
})
}
</script>
regimg.php
<?php
include 'db.php';
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
$photo = $_FILES['photo']['name'];
$query = mysqli_query($conn,"INSERT INTO img(image) VALUES('$photo')");
if ($query AND move_uploaded_file($_FILES['photo']['tmp_name'], 'image/'.$photo))
{
echo 'Data has been added';
}
else
{
echo 'data could not be added';
}
}
?>
When I click on the file then there one error showing, undefined index photo.
Please help me out in this problem
this in your function is the window, not the form element. Change the FormData line to :
var formData = new FormData(theForm);

PHP - AJAX - JAVASCRIPT - $_FILES blank

I've seen lots of questions on this subject, but none of them seem to address my issue. It all seems pretty straight forward, but I just get a blank array, am I missing something really simple here?
Thanks.
Here is the html / javascript code:
<script type="text/javascript" src="/javascript/jquery.js"></script>
<form enctype="multipart/form-data" action="" id="frmProduct" method="post">
<input type="file" id="pdffile" name="pdffile" size="50" />
<br />
<input id="pdffileupload" type="submit" value="Upload" />
</form>
<script>
$('#pdffileupload').bind('click', function ()
{
var files=document.getElementById('pdffile').files[0];
var fd = new FormData();
fd.append( "pdffile", files);
$.ajax({
url: '/info.php',
type: 'POST',
cache: false,
data: fd,
processData: false,
contentType: false,
success: function(data) { alert("YES"); },
error: function(data){ alert("NO"); }
});
return false;
});
</script>
& PHP info.php
<?php
var_dump($_FILES);
?>
Changes needed (just check once by trying all my suggestions):-
1.In the same folder put both files (same working directory).
Code changes:-
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> <!-- add jquery library like this -->
<form enctype="multipart/form-data" action="" id="frmProduct" method="post">
<input type="file" id="pdffile" name="pdffile" size="50" />
<br />
<input id="pdffileupload" type="submit" value="Upload" />
</form>
<script>
$('#pdffileupload').bind('click', function ()
{
var files=document.getElementById('pdffile').files[0];
var fd = new FormData();
fd.append( "pdffile", files);
$.ajax({
url: 'info.php', // remove /
type: 'POST',
cache: false,
data: fd,
processData: false,
contentType: false,
success: function(data) { alert("YES"); },
error: function(data){ alert("NO"); }
});
return false;
});
</script>
And in php
<?php
print_r($_FILES);
?>
Note:- Check in your browser console (response tab).
You might try this:
<?php print_r($_FILES); ?>
instead of
<?php var_dump($_FILES); ?>
Because the var_dump doesn't work with $_FILES.

How to solve this jQuery ajax post method undefine index problem while uploading images?

I want to Upload photos by using Ajax Post method,
Here is my html and javascript code
<script>
$(document).ready(function(){
$('#multiple_upload_form').submit(function(e){
e.preventDefault();
var upload = $('#images').val();
$.ajax({
type:'POST',
url:'album.php',
data:
{
upload : images
},
cache:false,
contentType:false,
processData:false,
success:function(data)
{
$('#image_preview').html(data);
},
error:function()
{
$('#image_preview').html('error');
}
});
return false;
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="album.php" name="upload_form" id="multiple_upload_form" role="form" enctype="multipart/form-data">
<div class="form-group">
<label for="email">Album Name</label>
<input type="text" name="aname" class="form-control" id="aname">
</div>
<div class="form-group">
<label for="file">Upload Photos:</label>
<input type="file" id="images" name="images" />
</div>
<div id="images_preview"></div>
</div>
<center class="feedback" style="display:none">Loading...</center>
<button id="submit" name="submitt" class="btn btn-default">Submit</button>
</form>
and this is my PHP CODING
if(isset($_FILES['images']['name']) )
{
$img = $_FILES['images']['name'];
if(!empty($img))
{
echo 'MaxSteel';
}
}
else
{
echo 'Same Problem';
}
I am having undefine index : images
it works fine with input type="text" but when it comes to "file" type is shows error help me solving this problem
Go through this code, it may help
var data = new FormData();
data.append("Avatar", file.files[0]);
$.ajax({
url: "http://192.168.1.1:2002/,
type: "POST",
data:data,
contentType: false,
cache: false,
processData:false,
success: function(data)
{
console.log(data);
}
});
Its posible that the file is not upload becouse of some error. You should review the parameters related to file upload as UPLOAD_MAX_SIZE, etc.
You can use var_dump($file) to see the $_FILE content.
You need to be sending your data through FormData().
Try something like this:
var images = $("#images").get(0).files;
var formData = new FormData();
$.each(images, function(i, image) {
data.append("images[]", image);
});
Then send formData as your $.ajax data.

AJAX redirect after php post return true or no error

I have very very little knowledge of javascript but somehow I managed to post form data to a php file.
Now I am facing a little problem, there are some validations on php file, what I want is if there is any validation fails and the php file returns $error = 'Invalid data'; I want this ajax request to simply display the error message.
Or, if it returns no error, or $error = ''; this ajax request redirect to thankyou.php page.
HTML file:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function (e){
$("#frmContact").on('submit',(function(e){
e.preventDefault();
$.ajax({
url: "data.php",
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
success: function(data){
if (data == 'true') {
window.location.href="thankyou.php";
};
if (data !== 'true') {
$("#status").html(data);
};
},
error: function(){
}
});
}));
});
<form id="frmContact" action="" method="post">
<div id="status"></div>
<div>
<label>Email</label>
<span id="userEmail-info" class="info"></span><br/>
<input type="text" name="userEmail" id="userEmail" class="demoInputBox">
</div>
<div>
<input type="submit" value="Send" class="btnAction" />
</div>
</form>
data.php
<?php
// PHP code above...
//Lets add $error variable for test purpose...
$error = 'Invalid data';
?>
Change only success function like this
success: function(data){
if (data === 'Invalid data') {
$("#status").html(data);
}
else {
window.location.href="thankyou.php";
}
}
and in php you should echo $error
Echo out "Success" if everything goes according to what you wanted in the posted data i.e all validations passed or echo out any specific validation error. The echoed response will be the response according to which our JS will act accordingly.
$(document).ready(function (e){
$("#frmContact").on('submit',(function(e){
e.preventDefault();
$.ajax({
url: "data.php",
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData:false
})
.done(function(response){
if(response=="Success")
window.location.href="thankyou.php";
else
$("#status").html(response);
});
}));
});

Categories