weixin_33737134 2013-08-24 02:46 采纳率: 0%
浏览 33

PHP和Ajax上传

This script inserts data into a table, as well as uploads an image
I want the URL from the image upload to be inserted into the column image

Another problem that I'm having is that when I put the upload portion of the form inside the other form, it refreshes the page and says that the file is not selected anymore.

Ideally I would only have one submit button, and the load bar would still work the same way, giving a dialog box saying the file was uploaded successfully and then after closing that it will submit the form into the database.

index.php

    <?php 
        session_start();
        if(isset($_SESSION['username']))
        {
            mysql_connect ('localhost', 'root', '') ;
            mysql_select_db ('admin');
        }
        else
        {
        header("Location: index.php");
    }
    if (isset($_POST['submit'])) {
        $month = htmlspecialchars(strip_tags($_POST['month']));
        $date = htmlspecialchars(strip_tags($_POST['date']));
        $year = htmlspecialchars(strip_tags($_POST['year']));
        $time = htmlspecialchars(strip_tags($_POST['time']));
        $title = htmlspecialchars(strip_tags($_POST['title']));
        $entry = $_POST['entry'];
        $image = htmlspecialchars(strip_tags($_POST['myPost']));
        $timestamp = strtotime($month . " " . $date . " " . $year . " " . $time);
        $entry = nl2br($entry);
        if (!get_magic_quotes_gpc()) {
            $title = addslashes($title);
            $entry = addslashes($entry);
        }
        $sql = "INSERT INTO posts (timestamp,title,entry,image) VALUES ('$timestamp','$title','$entry','$image')";
        $result = mysql_query($sql) or print("Can't insert into table.<br />" . $sql . "<br />" . mysql_error());
        mysql_close();
        header("location: index.php");
    }   
    $current_month = date("F");
    $current_date = date("d");
    $current_year = date("Y");
    $current_time = date("H:i");

    $sess_val = time(); //create a unique identifier for this upload session that will be the value of the hidden input
    $sess_name = ini_get("session.upload_progress.name"); //this constant will be the name of the hidden input

?>
<!DOCTYPE HTML>
<html>
<head>
    <title>Geeky Gents</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <link rel="icon" href="images/favicon.ico" />
    <script>
    //simply fetch the progress of the current upload via AJAX
    function checkProgress()
    {
    var xmlhttp;
    if(window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
    if(xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    //call the function to update the progress bar visually
    updateProgressBar(eval("("+xmlhttp.responseText+")")); //don't actually do this - it's unsafe
    }
    }
    //send the request to uploader.php with the progress parameter present
    xmlhttp.open("GET", "uploader.php?progress=<?php echo $sess_val; ?>", true);
    xmlhttp.send();
    }

    //this function converts the JSON object of the progress into a visual progress bar
    function updateProgressBar(response)
    {
    if(response['bytes_processed']==undefined) //this upload is finished
    {
    document.getElementById("progress-inner").style.width = "600px";
    alert("Done!");
    //we do not make another request for the progress since it's done
    }
    else
    {
    //calculate the new pixel width of the progress bar
    var new_width = Math.round(response['bytes_processed'] / response['content_length'] * 600);
    document.getElementById("progress-inner").style.width = new_width+"px";
    checkProgress(); //make another request for the progress
    }
    }
    //this function is called upon upload - it begins the progress checking
    function beginUpload()
    {
    var t = setTimeout("checkProgress()", 2000); //wait a bit to leave enough time for initial upload to be sent
    }
    </script>
</head>
<body>
    <div class="links">
        <a href="index.php">Home</a>
        <a href="about.html">About</a>
        <a href="products.html">Products</a>
        <a href="join.html">Join Us</a>
    </div>
    <div class="body">
        <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
        <p>
        <input type="hidden" value="<?php echo $current_month; ?>" name="month" id="month" />
        <input type="hidden" name="date" id="date" size="2" value="<?php echo $current_date; ?>" />
        <input type="hidden" value="<?php echo $current_year; ?>" name="year" id="year" />
        <input type="hidden" name="time" id="time" size="5" value="<?php echo $current_time; ?>" /></p>
        <p><label for="title">*Title:</label><input type="text" name="title" name="title" size="40" /></p>
        <input type="text" name="uploaded_file" name="uploaded_file" value="<?php strip_tags($_POST['myFile']); ?>" size="70" />
        <p>*Content:</p>
        <p><textarea cols="80" rows="20" name="entry" id="entry"></textarea></p>
        <p>
        <input type="submit" name="submit" id="submit" value="Submit">
        <input type="button" value="Cancel" onclick="window.location.href='index.php'">
        </p>
        </form>
        <br /><br />
        <p>Image Uploader: (h x w)(150 x 750)</p>
            <form action="uploader.php" method="POST" enctype="multipart/form-data" target="submit-catch">
            <input type="hidden" name="<?php echo $sess_name ?>" value="<?php echo $sess_val; ?>" />
            <input type="file" name="myFile" />
            <input type="submit" value="Upload" onclick="beginUpload();" />
            </form>
            <div id="progress-outer">
            <div id="progress-inner"></div>
            </div>
            <iframe name="submit-catch" style="display:none;"></iframe>
    </div>
    <div class="footer">
            <a href="http://www.youtube.com/user/GeekyGents/" target="_blank"><img src="images/icon/yt.png" /></a>
            <a href="http://www.facebook.com/GeekyGents/" target="_blank"><img src="images/icon/fb.png" /></a>
            <a href="https://twitter.com/GeekyGents/" target="_blank"><img src="images/icon/twitter.png" /></a>
    </div>
</body>
</html>

Uploader.php

<?php
session_start(); //we need to be able to access the session
if(isset($_REQUEST['progress']) && isset($_SESSION['username'])) //getting the progress on an upload
{
//get the key of this particular upload - based on the passed parameter
$key = ini_get("session.upload_progress.prefix").$_REQUEST["progress"];
if(isset($_SESSION[$key]))
echo json_encode($_SESSION[$key]); //make it easy for our JavaScript to handle the progress data
else //the session doesn't exist, which means the upload has already finished or has not yet started
echo json_encode($key);
}
else //initial upload request
{
define("UPLOAD_DIR", "uploads/");

    if (!empty($_FILES["myFile"])) {
    $myFile = $_FILES["myFile"];

    if ($myFile["error"] !== UPLOAD_ERR_OK) {
        echo "<p>An error occurred.</p>";
        exit;
    }

    // ensure a safe filename
    $name = preg_replace("/[^A-Z0-9._-]/i", "_", $myFile["name"]);

    // don't overwrite an existing file
    $i = 0;
    $parts = pathinfo($name);
    while (file_exists(UPLOAD_DIR . $name)) {
        $i++;
        $name = $parts["filename"] . "-" . $i . "." . $parts["extension"];
    }
    $fileType = exif_imagetype($_FILES["myFile"]["tmp_name"]);
    $allowed = array(IMAGETYPE_GIF, IMAGETYPE_JPEG, IMAGETYPE_PNG);
    if (!in_array($fileType, $allowed)) {
        echo "<p>Wrong file type, please use GIF JPEG or PNG</p>";
    }
    else
    {
    // preserve file from temporary directory
    $success = move_uploaded_file($myFile["tmp_name"],
        UPLOAD_DIR . $name);
    if (!$success) { 
        echo "<p>Unable to save file.</p>";
        exit;
    }

    // set proper permissions on the new file
    chmod(UPLOAD_DIR . $name, 0644);
    }
}
}
?>

If you find anything else like security holes please do let me know about them as well, I'm learning.

  • 写回答

1条回答 默认 最新

  • weixin_33716941 2013-08-24 02:59
    关注

    it looks like you miss to set upload target for form, can you please give id "file_upload_form" to form and use below code.

    function init() {
    
        document.getElementById('file_upload_form').onsubmit=function() {
            document.getElementById('file_upload_form').target = 'upload_target'; 
    //'upload_target' is the name of the iframe
        }
    }
    window.onload=init;
    
    评论

报告相同问题?

悬赏问题

  • ¥15 TI的insta-spin例程
  • ¥15 完成下列问题完成下列问题
  • ¥15 C#算法问题, 不知道怎么处理这个数据的转换
  • ¥15 YoloV5 第三方库的版本对照问题
  • ¥15 请完成下列相关问题!
  • ¥15 drone 推送镜像时候 purge: true 推送完毕后没有删除对应的镜像,手动拷贝到服务器执行结果正确在样才能让指令自动执行成功删除对应镜像,如何解决?
  • ¥15 求daily translation(DT)偏差订正方法的代码
  • ¥15 js调用html页面需要隐藏某个按钮
  • ¥15 ads仿真结果在圆图上是怎么读数的
  • ¥20 Cotex M3的调试和程序执行方式是什么样的?