0

I have an index.html page which is used to take login from users and display the data according to the users from the database. I have hyperlinked to other preview.html page which is used to upload the images to the server. Below are the codes.

HTML index.html

<script>
function PostData() {


    // 1. Create XHR instance - Start
    var xhr;
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) {
        xhr = new ActiveXObject("Msxml2.XMLHTTP");
    }
    else {
        throw new Error("Ajax is not supported by this browser");
    }
    // 1. Create XHR instance - End

    // 2. Define what to do when XHR feed you the response from the server - Start
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status == 200 && xhr.status < 300) {
                document.getElementById('div1').innerHTML = xhr.responseText;
            }
        }
    }
    // 2. Define what to do when XHR feed you the response from the server - Start

    var userid = document.getElementById("userid").value;
    var pid = document.getElementById("pid").value;

    // 3. Specify your action, location and Send to the server - Start 


    xhr.open('POST', 'login.php');

    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send("userid=" + userid + "&pid=" + pid);
    //xhr.send("&pid=" + pid);
    // 3. Specify your action, location and Send to the server - End

}
</script>

</head>

<body>

<form>
    <label for="userid">User ID :</label><br/>
    <input type="text" name ="userid" id="userid"  /><br/>
    <label for="pid">Password :</label><br/>
    <input type="password" name="password" id="pid" /><br><br/>



    <div id="div1">
    <input type="button" value ="Login" onClick="PostData()" />
    </div>


</form>

PHP login.php

$servername = "localhost";
$username = "root";
$password = "";
$dbname = "db";

//session_start();
// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}
if(isset($_POST['userid'],$_POST['pid']))
{
  $userid = trim($_POST["userid"]);
  $pid = trim($_POST["pid"]);

  $sql = "SELECT * FROM tablename WHERE uname = '$userid' and pword = '$pid'";
  $result = mysqli_query($conn,$sql);
  $row = mysqli_fetch_array($result);

  echo "公司".'<br/>';
  echo $row['client'].'<br/>'.'<br/>';
  echo "第".'<br/>';
  echo '<a href="preview.html"/>'.$row['day1'].'</a>'.'<br/>';
?>

HTML preview.html

<head>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
<script>
var form = document.getElementById('form');
form.noValidate = true;
form.addEventListener('submit',function(readURL){
    if(!event.target.checkValidity()){
        event.preventDefault();
        alert('please fill the form');
    }
},false);
function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#blah')
                    .attr('src', e.target.result);


            };

            reader.readAsDataURL(input.files[0]);
        }
    }

</script>

</head>
<body>
<form enctype="multipart/form-data" id="form" action="login.php" method="POST">
  <input name="image" type='file' required id="image" onchange="readURL(this);" accept="image/*" capture="camera" /><br/><br/>
  <img id="blah" src="#" alt="your image" /><br/><br/>


  <input type="submit" value="Upload"/>
    </form>
</body>

I want a functionality that when there is no internet connection the image is retained into the browser and when the internet connection is back online, the image is uploaded and moved to the designated folder and subfolder that i created using the run time according to the data from database.

Vishu
  • 45
  • 8
  • Use [Offline.Js](https://github.com/HubSpot/offline) to detect when your application is online and proceed with the upload – Mysteryos Jun 02 '15 at 04:26
  • < script src = "offline.js"> is it the only thing that needs to be done? – Vishu Jun 02 '15 at 04:32
  • I tried to use this but i couldnt make out how it work. Can you please explain a bit. – Vishu Jun 04 '15 at 02:44
  • Include the js library. The library will automatically detect when your connection is down and retry failed ajax requests (in your case, your image upload). I recommend that you use jquery's `ajax` function to ensure cross browser compatibility, instead of writing your own: http://stackoverflow.com/questions/10899384/uploading-both-data-and-files-in-one-form-using-ajax – Mysteryos Jun 04 '15 at 05:18

0 Answers0