I would like to use Twitter Boostrap FileUpload because I like the preview function it offers. This and some text I would like to post to a php script that does the uploading and adds info to a db. I dont necessarily need php to do the uploading of the file if javascript can do it I just need the link too it.
This question has been asked before but I can't find any working answer there. And no I dont want to use bootstrap file-upload that is suggested in the first answer.
In my php code I try to get the imgData with _FILE but its empty. How can I get this?
this is my form:
<form action="php/service.php" method="post">
<div class="control-group">
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="fileupload-preview thumbnail" style="width: 200px; height: 150px;"></div>
<div>
<span class="btn btn-file">
<span class="fileupload-new">Select image</span>
<span class="fileupload-exists">Change</span>
<input type="file" name="imgData" id="imgData" />
</span>
Remove
</div>
</div>
</div>
<div class="control-group">
<textarea rows="3" id="text" class="" name="text" placeholder="Text..."></textarea>
</div>
<div class="control-group">
<button type="submit" id="upload" class="btn" onclick="$('.fileupload').fileupload();">Upload</button>
</div>
</form>
in service.php:
if ($_FILES["imgData"]["error"] > 0) {
echo "Error: " . $_FILES["imgData"]["error"] . "<br />";
} else {
$fileExt = $_FILES["imgData"]["type"];
}
You need to set the encoding type for the form.
<form action="php/service.php" method="post" enctype="multipart/form-data">
I also had difficulties with this bootstrap way of uploading files in IE. There might be some security issues in that one that prevents uploading.
Related
I have made an application using codeigniter, and everything was working fine few day ago. But suddenly, yesterday, when I ran the application, I am getting error, when I am submitting data from the forms which contain enctype="multipart/form-data". Null data is received at the controller. When I remove enctype, than everything goes fine, but due to image upload, I have to keep enctype in some form tags.
<form action="<?= site_url('nasty_v2/dashboard/uploadPaid?key=').$this->my_func->scpro_encrypt("betul"); ?>" method="POST" role="form" enctype="multipart/form-data">
<div class="portlet box purple-sharp">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-image"></i>Upload Payment Proof For
</div>
</div>
<div class="portlet-body flip-scroll" align="center">
<span style = "color : #b706d6;"><h2><strong>#<?= (120000+$orid); ?></strong></h2></span>
<div class="form-group">
<div class="fileinput fileinput-new" align="center" data-provides="fileinput">
<div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px; line-height: 150px;"></div>
<div>
<span class="btn red btn-outline btn-file">
<span class="fileinput-new"> Select image </span>
<span class="fileinput-exists"> Change </span>
<input type="hidden" value="" name="title"><input type="file" name="fileImg"> </span>
Remove
</div><div class="clearfix"> </div><button type="submit" class="btn btn-primary btn-circle"><i class="fa fa-upload"> Submit</i></button>
</div>
</div>
</div>
<input type="hidden" name="or_id" id="inputOr_id" class="form-control" value="<?= $or_id; ?>">
</div>
</form>
I checked the HTTP request using Telerik Fiddler 2, and the found that form is successfully submitting data in request, but that data is not reaching controller. What should be the issue?
It may cause by the file upload. Try setting followings
ini_set('max_file_uploads',1000);
ini_set('post_max_size','5000M');
ini_set('upload_max_filesize','5000M');
//or php.ini file
I'm learning now php and i'm stuck in one place with handling form submit action.
Im my input i'm trying to store user name in $_GET['firstname'] variable. But it's empty. I mean, that after checking if $_GET['firstname'] isset I get false. Where is my mistake?
<body>
<div class="container">
<div class="section back">
<form class="form myform" action="addcustomer.php" method="get">
<span class="myformtitle">
Add new User
</span>
<div class="form-group">
<div class="col validate-input">
<span class="label-input">Firstname</span>
<input id="firstname" class="input myinput" type="text" name="firstname" placeholder="Enter your firstname" value="<?php if (isset($_GET['firstname'])) echo $_GET['firstname']?>">
<span class="focus-input"></span>
</div>
</div>
<div class="col col-btn">
<button type="button" name="submit" class="btn sb-btn btn-block">
<span class="btn-sp">
Submit
</span>
</button>
</div>
</form>
</div>
</div>
<?php
if (isset($_GET['firstname'])) {
echo '<script>console.log("' . $_GET['firstname'] . '")</script>';
} else {
echo '<script>console.log("no name")</script>';
}
?>
</body>
Change your button type from button to submit.
button types are for Javascript (JS).
submit types are used to process PHP (form) directives.
So I'm working on a social networking Facebook type proof of concept project for college and I'm trying to get a Bootstrap, multi-button input group to display properly for a comment box.
I would like to have the text area, with a Comment and Like button on the right hand side, with the whole input group filling the width of the panel as seen below.
Trying to achieve this!
The problem is when I add in my <form> tags, the formatting of the entire group within <div class="row"> goes crazy and forms a little box on the left hand side (screenshot below).
If I take out the <form> tags formats properly, but I'm just not sure how to manage the <form> tags/where to put them to achieve this multi-button group.
How it displays currently
The code below is a few undos later to when the forms weren't broken, just so you know this isn't how I originally went about achieving it, but what i've succumbed to for now.
If anyone knows how to achieve this I'd be so grateful!
while($row = mysqli_fetch_assoc($result)) {
//Get relative timestamp for current post
$timestamp = strtotime($row['StatusTimestamp']);
$stampRelative = CheckTimestamp($timestamp);
echo '<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">'.$row['UserName'].'<small class="postTimestamp"> '.$stampRelative.'</small></h3>
</div>
<div class="panel-body">
'.$row['StatusContent'].'
</div>
<div class="panel-footer clearfix">';
echo ' <div class="row">
<div class="col-lg-11">
<div class="input-group">
<form action="'.CommentOnStatus($row['StatusID']).'" method="post">
<input type="text" class="form-control" name="comment" placeholder="Post a comment...">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">Comment</button>
<input type="hidden" name="statusId" value="'.$row['StatusID'].'">
</span>
</form>
</div>
</div>
<div class="col-lg-1">
<form action="'.LikeStatus($row['StatusID']).'" method="post">
<button type="submit" id="like" name="'.$row['StatusID'].'" class="btn btn-primary pull-right">Like</button>
</form>
</div>
</div>
</div>
</div>';
}
I checked your code. This should work fine. Let me know if this does not work. THere are minor problems of placing the elements. Please Use this in your row :
<div class="col-lg-11">
<form method="post">
<div class="input-group">
<input type="text" class="form-control" name="comment" placeholder="Post a comment...">
<span class="input-group-btn">
<button class="btn btn-default" style="border-width: 1px 0 1px 0;border-radius: 0;" type="submit">Comment</button>
<button type="submit" id="like" name="'" class="btn btn-primary" style="border-radius: 0 5px 5px 0;">Like</button>
</span>
<input type="hidden" name="statusId" value="">
</div>
</form>
</div>
This is my output
Use the classnavbar-form in your form. It should work fine now.
So form will look like <form action="'.CommentOnStatus($row['StatusID']).'" method="post" class="navbar-form">
there's a similar question about this but honestly i still don't understand how it works.
here is the code:
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="fileupload-preview thumbnail" style="width: 200px; height: 150px;">
</div>
<div>
<span class="btn btn-default btn-file"><span class="fileupload-new">Select image</span>
<span class="fileupload-exists">Change</span><input type="file" name="myimage" accept="image/*"></span>
Remove
</div>
</div>
my questions is: 1.) how will i pass the image using $_POST[] or $_FILES[] ?
2.) does the <input type="file" name="myimage" accept="image/*"> handles both when the user clicks the "Select Image" and "Change"?
3.) or what way can i pass the image and upload it on the server using PHP?
use tag with enctype as multipart/form-data around this code to post your files.
First of all, you need to change version of the code above to latest one by changing: fileupload to fileinput. Else you will have trouble with displaying.
Here is simple example for you:
<form method='post' action='upload.php' enctype='multipart/form-data'>
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-new thumbnail" style="width: 277px; height: 220px;">
<img src="../images/default_image.png" alt="...">
</div>
<div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 277px; max-height: 220px;"></div>
<div>
<span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span><input type="file" name="file[]"></span>
Remove
</div>
</div>
<input type='submit' name='submit' value='SUBMIT' />
</form>
So when you submit the form, this will process upload.php. So to upload an image to server, you need to write code in this file to handle that. A simple code could be:
<?php
if(isset($_POST['submit'])){ // When you click submit the form
if(isset($_FILES['file']['tmp_name'])){ //check if there is a file has been submitted.
// count and loop through array of files(if multiple images are uploaded)
for($i=0; $i < count($_FILES['file']['tmp_name']);$i++)
{
// check if there is a file in the array
if(!is_uploaded_file($_FILES['file']['tmp_name'][$i]))
{
echo 'No file is uploaded';
}
else{
Code to handle image upload and store image path to array
}
All images path are in array, you need to serialize() it and save to database as normal
}
?>
Hope you might get the idea of how to use Jasny Fileinput to handle image upload.
I have been having problems for the past two days trying to submit a form using jquery ajax, php to mysql database. I reused a code for an animation form which I found online. The html code as follows (file name: "Slider.html"):
<html>
<body>
<div id="form_wrapper" class="form_wrapper">
<form class="register" style="right:-500px;backgroundcolor:grey;">
<h3>Register</h3>
<div class="column">
<div>
<label>First Name:</label>
<input type="text" />
<span class="error">This is an error</span>
</div>
<div>
<label>Last Name:</label>
<input type="text" />
<span class="error">This is an error</span>
</div>
</div>
<div class="column">
<div>
<label>Username:</label>
<input type="text"/>
<span class="error">This is an error</span>
</div>
<div>
<label>Email:</label>
<input type="text" />
<span class="error">This is an error</span>
</div>
<div>
<label>Password:</label>
<input type="password" id="r_passwordField"/>
<span class="error">This is an error</span>
</div>
</div>
<div class="bottom">
<div class="remember">
<input type="checkbox" />
<span>Send me updates</span>
</div>
<input type="submit" id="registrationform" value="register"/>
<a href="index.html" rel="login" class="linkform">You have an account already? Log in
here</a>
<div class="clear"></div>
</div>
</form>
<form class="login active">
<h3>Login</h3>
<div>
<label>Username:</label>
<input type="text" />
<span class="error">This is an error</span>
</div>
<div>
<label>Password: <a href="forgot_password.html" rel="forgot_password" class="forgot
linkform">Forgot your password?</a></label>
<input type="password" id="l_passwordField" size="10"/>
<span class="error">This is an error </span>
</div>
<div class="bottom">
<div class="remember"><input type="checkbox" /><span>Keep me logged in</span></div>
<input type="submit" id="loginform" value="Login"></input>
<a href="register.html" rel="register" class="linkform">You don't have an account yet?
Register here</a>
<div class="clear"></div>
</div>
</form> <form class="forgot_password">
<h3>Forgot Password</h3>
<div>
<label>Username or Email:</label>
<input type="text" />
<span class="error">This is an error</span>
</div>
<div class="bottom">
<input type="submit" id="forgortform" value="Send reminder"></input>
Suddenly remebered? Log in here
<a href="register.html" rel="register" class="linkform">You don't have an account?
Register here</a>
<div class="clear"></div>
</div>
</form>
</div>
<div id="graph-wrapper" class="graph-container" style="display:none">
<h3>Standard Diviation Bell Curve<h3>
<div class="graph-info">
Visitor
<span></span>
</div>
<div class="graph-container">
<div id="graph-lines"></div>
<div id="graph-bars"></div>
</div>
</div>
</div>
</body>
</html>
jquery ajax code as follows (jquery script on the same file as the html code):
<script>
$(document).ready(function(){
//animated code and other codes omitted
("#registrationform").click(function(){
$.post("postdata.php",
{fname:"Ibrahim",lname:"Ahmadu",email:"ibrostay#yahoo.com",uid:"ibro2stay",pwd:"ibro2stay",mean:"0.1",varience:"0.1",sdev:"0.
1",duration:"0.1"},function(responce){
if(responce==0){
alert("There was an error updating the record");
}else{
alert("update successful");
}
});
});
});
</script>
Below is the php code (php code file name: "postdata.php"):
<?php
$fname=$_REQUEST["fname"];
$lname=$_REQUEST["lname"];
$email=$_REQUEST["email"];
$uid=$_REQUEST["uid"];
$pwd=$_REQUEST["pwd"];
$mean=$_REQUEST["mean"];
$varience=$_REQUEST["varience"];
$sdev=$_REQUEST["sdev"];
$duration=$_REQUEST["duration"];
$con=mysql_connect('localhost','root','');
if(!$con)
{
die("Error Connecting to database;"+mysql_error());
}
$database=mysql_select_db('mydb');
if(!$database)
{
die("Error Connecting to database;"+mysql_error());
}
$update = mysql_query("insert into users values('$fname','$lname','$email','$uid','$pwd','$mean','$varience','$sdev','$duration')");
if(!$update)
{
die("Update wasn't Success full"+mysql_error());
}
echo "update successfull";
mysql_close($con);
?>
Whenever I click the register button nothing happens. The page only refreshes back to the login form since it has class "active" as the default form, and the browser address bar changes from this url: "localhost/slider.html" to this url: "localhost/slider.html?".
I hope my question was explicit enough, because I need an urgent answer, as this is my thesis project and I am running out of options.
and the browser address bar changes from this url: "localhost/slider.html" to this url: >"localhost/slider.html?".
use e.preventDefault();
$("#registrationform").click(function(e){
^
|
|_______________ you forgot the $
then add,
`e.preventDefault();
check javascript console and you will see all the errors. you have to eliminate one by one. For the start, check above.
advice: when you copy/paste codes, atleast try to know the structures. sometimes it wil conflict with your code and may stop running your code.
Looks like your Javascript has some errors and not executing hence. So, the form submit resorts to its default behavior - that is, submit to the tag's action attribute. Since you have not specified the action attribute in the tag, it will post the parameters to the current page.
You are getting the url localhost/slider.html? because of two reasons:
You have not specified method="post" in your . So, the form is trying to submit as GET. That is why the appended "?"
You do not have names for the inputs. So, the query string is empty. You need to specify name attribute for every input.
What you have to do first is to debug your Javascript. Use Firebug in Firefox or the console in Chrome or any similar tools to capture your JS errors and also examine your Ajax requests and responses.
Also, make sure that the last statement in the "click" function is a :
return false;
to force the form to stay on the page.
Another important thing is, as #steve pointed out, add method and action attributes to your tag. This will make sure that your script will not fail entirely on a JS disabled browser or on any such conditions.