在新自动创建的页面中显示图像

时间:2013-11-28 08:56:25

标签: javascript php jquery html image

嗨,这是我的脚本,当有人上传图像时,它会将数据保存到数据库中,并且还会创建一个标题填写的页面。请参阅PHP脚本中的$ template,它是生成的页面,它是空的,但我想在上传图像时在此页面中显示图像。

此脚本可以执行的操作: 当有人上传图片时 它会自动创建一个页面,其中包含在标题部分填写的URL 它使用这些信息ID,用户名,链接,类型,大小,名称

将数据保存到表save_data中的数据库中

我想要什么 当它创建页面时,它会显示上传的图像

使用图片创建的PHP上传脚本:

<?php
    if(!isset($_COOKIE['loggedin'])){
        header("location:index.php");
    }

session_start();

if(!isset($_SESSION['user'])){

header("location: index.php");
}
else {

?>

<?php
    include("connection.php");
$current_page_URL =(isset($_SERVER["HTTPS"]) && $_SERVER["HTTPS"]==”on”) ? “https://” : “http://”;

$current_page_URL = $_SERVER["SERVER_NAME"] . $_SERVER["REQUEST_URI"];

$allowed_filetypes = array('.jpg','.JPG','.jpeg','.png','.gif','.JPEG','.PNG','.GIF');
$max_filesize = 10485760;
$upload_path = 'uploads/';

$filename = $_FILES['image_file']['name'];
$ext = substr($filename, strpos($filename,'.'), strlen($filename)-1);

if(!in_array($ext,$allowed_filetypes))
  die('The file you attempted to upload is not allowed.');

function bytesToSize1024($bytes, $precision = 2) {
    $unit = array('B','KB','MB');
    return @round($bytes / pow(1024, ($i = floor(log($bytes, 1024)))), $precision).' '.$unit[$i];
}

$sFileName = $_FILES['image_file']['name'];
$sFileType = $_FILES['image_file']['type'];
$sFileSize = bytesToSize1024($_FILES['image_file']['size'], 1);




    if (file_exists("uploads/" . $_FILES["image_file"]["name"]))
      {
      echo $_FILES["image_file"]["name"] . " already exists. ";
      }
    else
      {
      move_uploaded_file($_FILES["image_file"]["tmp_name"],
      "uploads/" . $_FILES["image_file"]["name"]);
      echo "Stored in: ".$_SERVER["SERVER_NAME"]. "/uploads/" . $_FILES["image_file"]["name"];

      }
      $savefile = $_SERVER["SERVER_NAME"]. "/uploads/" . $_FILES["image_file"]["name"];

      $insert_query = "insert into save_data (username, Name, Type, size, link) values ('".$_SESSION['user']."','$sFileName','$sFileType','$sFileSize','$savefile')";

    if(mysql_query($insert_query)){

    echo "<script>alert('Successfully added to DB')</script>";



  //if the notice is set then display it
if(isset($notice)){echo $notice;} 
}}

// PAGE的模板

$template = <<<EOD
<?php

<html>
<body>

</body>
</html>
EOD;

//页面创建脚本

//handle the posted form
if(isset($_POST['title'])){
    //replace the areas of the template with the posted values
    $page = str_replace('<!--TITLE-->',htmlentities($_POST['title']),$template);;
    //create a name for the new page
    $pagename =($_POST['title']).'.php';

    //db connect & select
    $db=mysql_connect('localhost','root','123');
    mysql_select_db('user');

    //check if page already exists
    $result = mysql_query('SELECT pagename from pages WHERE url="'.mysql_real_escape_string($pagename).'"');
    if(mysql_num_rows($result)>=1){
        $notice = '<p>Page already created <b>./pages/'.$pagename.'</b></p>';
    }else{
        //inset new page into db
        mysql_query('INSERT into pages (`id`,`title`,`comment`,`url`)VALUES("",
        "'.mysql_real_escape_string(htmlentities($_POST['title'])).'",
        "'.$pagename.'")');
        //put the created content to file
        file_put_contents('./pages/'.$pagename,$page);
        //make a notice to show the user
        $notice = '<p>New Page created <b>./pages/'.$pagename.'</b></p>';
    }
}
  ?>

HTML页面

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>Pure HTML5 file upload | Script Tutorials</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" />
        <script src="js/script.js"></script>
    </head>
    <body>
    <div class="container">
      <div class="contr"><h2>You can select the file (image) and click Upload button</h2></div>

            <div class="upload_form_cont">
                <form id="upload_form" enctype="multipart/form-data" method="post" action="upload.php">
                    <div>  <p>Title:<input type="text" name="title" size="31"></p>
                        <div><label for="image_file">Please select image file</label></div>

                        <div><input type="file" name="image_file" id="image_file" onchange="fileSelected();" /></div>
                    </div>
                    <div>
                        <input type="button" type="submit" value="Upload" onclick="startUploading()" />
                    </div>
                    <div id="fileinfo">
                        <div id="filename"></div>
                        <div id="filesize"></div>
                        <div id="filetype"></div>
                        <div id="filedim"></div>
                    </div>
                    <div id="error">You should select valid image files only!</div>
                    <div id="error2">An error occurred while uploading the file</div>
                    <div id="abort">The upload has been canceled by the user or the browser dropped the connection</div>
                    <div id="warnsize">Your file is very big. We can't accept it. Please select more small file</div>

                    <div id="progress_info">
                        <div id="progress"></div>
                        <div id="progress_percent">&nbsp;</div>
                        <div class="clear_both"></div>
                        <div>
                            <div id="speed">&nbsp;</div>
                            <div id="remaining">&nbsp;</div>
                            <div id="b_transfered">&nbsp;</div>
                            <div class="clear_both"></div>
                        </div>
                        <div id="upload_response"></div>
                    </div>
                    <div>


                    </div>
                </form>

                <img id="preview" />
            </div>
        </div>
    </body>
</html>

请给我答案我在问问题,但没有人帮我:(

0 个答案:

没有答案