2uzhan.com
Advertisement
Now Place:2uzhan.com » Bootstrap Not Working with Image Upload Form

Bootstrap Not Working with Image Upload Form

Web Development @ September 29, 2015   Views:0

Dear All,
I am facing a weird problem, similar codings give different result. Why is this happening? I am saving both files as .php file. Please guide me. I really having headache with this form.
Code 1: Working Fine (Non-bootstrap)

<html> <head>
TestPage
  <link rel="stylesheet" href="http://gsmtecharena.com/Testing/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://http://gsmtecharena.com/Testing/bootstrap/3.3.5/js/bootstrap.min.js"></script> </head> <body> <div> <?php include("img-upload.php");
?> <form method="post" action="img-upload.php" name="registerform" id="registerform"> <fieldset> <label for="username">Username:</label><input type="text" name="username" id="user_id" /><br /> <label for="password">Password:</label><input type="password" name="password" id="ap_id" /><br /> <label for="email">Email Address:</label><input type="text" name="email" id="email" /><br /> <input type="submit" name="register" id="register" value="Register"  class="btn btn-info"  /> </fieldset> </form> <form name="Image" enctype="multipart/form-data" method="POST"> <table cellspacing=2 cellpadding=2 border=0> <tr> <td>Image 1: </td> <td><input type=file name=file accept="image/gif, image/jpeg, image/x-png" size="26" class="textbox"  required/> </td> </tr> <tr> <td>Image 2: </td> <td><input type=file name=file1 accept="image/gif, image/jpeg, image/x-png" size="26" class="textbox"  required/> </td> </tr> <tr> <td>Image 3: </td> <td><input type=file name=file2 accept="image/gif, image/jpeg, image/x-png" size="26" class="textbox"  required/> </td> </tr> <tr><td> </td><td><input type="submit" name="submit" value="Upload"  class="btn btn-info"  /></td></tr></table> </form><br> </div> </body> </html>

Code 2: Bootstrap (Not working)

<html> <head> <title>Bootstrap Example</title> <link rel="stylesheet" href="http://gsmtecharena.com/Testing/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://http://gsmtecharena.com/Testing/bootstrap/3.3.5/js/bootstrap.min.js"></script> </head> <body> <div> <?php include("img-upload.php");
?> <form method="post" action="img-upload.php" name="registerform" id="registerform"> <fieldset> <label for="username">Username:</label><input type="text" name="username" id="user_id" /><br /> <label for="password">Password:</label><input type="password" name="password" id="ap_id" /><br /> <label for="email">Email Address:</label><input type="text" name="email" id="email" /><br /> <input type="submit" name="register" id="register" value="Register"  class="btn btn-info"  /> </fieldset> </form> <h2>Upload Page</h2> <form role="form" name="Image" enctype="multipart/form-data" method="POST"> <label for="Image1">Image 1</label> <input type="file" name=file accept="image/gif, image/jpeg, image/x-png" size="26" class="textbox" required/> <label for="Image2">Image 2</label> <input type="file" name=file1 accept="image/gif, image/jpeg, image/x-png" size="26" class="textbox" required/> <label for="Image3">Image 3</label> <input type="file" name=file2 accept="image/gif, image/jpeg, image/x-png" size="26" class="textbox" required/> <input type="submit" name="submit" class="btn btn-info" value="Upload" /> </form> </div> </body> </html>

Thanks for any help.

--------------Solutions-------------

Well, both have bootstrap. The first one has the "image" <form> in a <table>, the second one doesn't. The first one just has TestPage, because it's not in a <title></title>. The second one has a large "Upload page" text but that's it.

Bootstrap Not Working with Image Upload Form

I don't see a "not working".

If you do mean the difference between a table alignment and a bootstrap alignment, then perhaps you can use this tutorial to apply a bootstrap layout to your form without using tables. Specifically the section entitled horizontal form layout, which resembles your original table version the most.

Obviously I had to remove the <?php include("img-upload.php");?> since you didn't post that. Perhaps the "non working" bit is in there. If it is, elaborate on what's not working.

In the bootstrap and normal version when you call the third script in the header you have

<script src="http://http://....."

try using only one "http" myabe?

Dear Traevel,
Thanks I have found the solution.

Dear Ventch_IT,
You are right. I found the solution to my problem too.

Thanks for all the help everyone.

hello my boostrap php mysql uploader audio and test uploder not work in mobile device why ...
uploader work in pc only problem for mobile user please help me sir

I'm attempting to simplify my fundraising page, and would like to show exactly how much each donation would help us out. I've listed the options below, but I would like ...

I'm currently doing some encoding work to protect a site from XSS attacks. We've stuck a bunch of <script>debugger;</script> tags in the db. Dispite my best efforts, the strings I've ...

    //The php section of the code

           <?php

           function getJSONFromDB($sql){

           $conn = mysqli_connect("localhost", "root", "","rent");

           //echo $sql;

           $result = mysqli_query($conn, $sql)or die(mysqli_error());

           $arr=array();

           while($row = mysqli_fetch_assoc($result)) {

                   $arr[]=$row;

               }

               return json_encode($arr); ...
© 2018 2uzhan.com Contact