title: Upload images automatically to the server when the lost data connection is back online
body: <p>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.</p>
  
  <p>HTML index.html</p>
  
  <pre><code>&lt;script&gt;
  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 &amp;&amp; xhr.status &lt; 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 + "&amp;pid=" + pid);
      //xhr.send("&amp;pid=" + pid);
      // 3. Specify your action, location and Send to the server - End
  
  }
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;form&gt;
      &lt;label for="userid"&gt;User ID :&lt;/label&gt;&lt;br/&gt;
      &lt;input type="text" name ="userid" id="userid"  /&gt;&lt;br/&gt;
      &lt;label for="pid"&gt;Password :&lt;/label&gt;&lt;br/&gt;
      &lt;input type="password" name="password" id="pid" /&gt;&lt;br&gt;&lt;br/&gt;
  
  
  
      &lt;div id="div1"&gt;
      &lt;input type="button" value ="Login" onClick="PostData()" /&gt;
      &lt;/div&gt;
  
  
  &lt;/form&gt;
  </code></pre>
  
  <p>PHP login.php</p>
  
  <pre><code>$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 "公司".'&lt;br/&gt;';
    echo $row['client'].'&lt;br/&gt;'.'&lt;br/&gt;';
    echo "第".'&lt;br/&gt;';
    echo '&lt;a href="preview.html"/&gt;'.$row['day1'].'&lt;/a&gt;'.'&lt;br/&gt;';
  ?&gt;
  </code></pre>
  
  <p>HTML preview.html</p>
  
  <pre><code>&lt;head&gt;
  &lt;link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /&gt;
  &lt;script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;meta charset=utf-8 /&gt;
  &lt;title&gt;JS Bin&lt;/title&gt;
  &lt;!--[if IE]&gt;
    &lt;script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
  &lt;![endif]--&gt;
  &lt;style&gt;
    article, aside, figure, footer, header, hgroup, 
    menu, nav, section { display: block; }
  &lt;/style&gt;
  &lt;script&gt;
  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 &amp;&amp; input.files[0]) {
              var reader = new FileReader();
  
              reader.onload = function (e) {
                  $('#blah')
                      .attr('src', e.target.result);
  
  
              };
  
              reader.readAsDataURL(input.files[0]);
          }
      }
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;form enctype="multipart/form-data" id="form" action="login.php" method="POST"&gt;
    &lt;input name="image" type='file' required id="image" onchange="readURL(this);" accept="image/*" capture="camera" /&gt;&lt;br/&gt;&lt;br/&gt;
    &lt;img id="blah" src="#" alt="your image" /&gt;&lt;br/&gt;&lt;br/&gt;
  
  
    &lt;input type="submit" value="Upload"/&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>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.</p>