当丢失的数据连接重新联机时,将图像自动上载到服务器

时间:2015-06-02 04:23:39

标签: javascript php jquery html

我有一个index.html页面,用于从用户登录并根据数据库中的用户显示数据。我已经超链接到其他preview.html页面,用于将图像上传到服务器。以下是代码。

HTML index.html

<div id="wrapper">
    <div id="box">
        <hr>
        <h2> O N L I N E<br>R E S U M E</h2>
        <hr>
        <p><b>Sample</b></p>
        <p>Sample</p>
        <p>E-mail Address: <a href="mailto:">sample@yahoo.com.ph</a></p>
    </div>
    <div id="navi">
    <center>
        <a class="link" id="resume" href="Resume.html">R E S U M E</a> 
        <a class="link" id="port" href="#">P O R T F O L I O</a> 
        <a class="link" id="contact" href="Contact.html">C O N T A C T</a> 
    </center>
    </div>
</div>

PHP login.php

<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>

HTML preview.html

$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/>';
?>

我想要一种功能,当没有互联网连接时,图像会保留在浏览器中,当互联网连接重新联机时,图像会上传并移动到我使用运行时创建的指定文件夹和子文件夹中来自数据库的数据。

0 个答案:

没有答案