2013-08-24 77 views
0

該腳本將數據插入一個表格,以及上傳圖像
我想從圖片上傳的URL將被插入到該列圖像PHP和Ajax上傳

說我有一個問題當我將表單的上傳部分放入其他表單中時,它會刷新頁面並表示該文件不再被選中。

理想情況下,我只會有一個提交按鈕,並且加載欄仍然以相同的方式工作,給出一個對話框說明文件已成功上傳,然後在關閉後它將提交表單到數據庫中。

的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); 
    } 
} 
} 
?> 

如果你發現別的像安全漏洞,請不要讓我知道他們爲好,我學習。

+1

不要使用mysql_ *,不使用'htmlspecialchars'和'strip_tags'轉義,而不是用準備好的語句和庫MySQLi或PDO。 $條目沒有被轉義並且可以用於注射。 – Prix

回答

0

它看起來像你想爲表單設置上傳目標,你可以給id「file_upload_form」來形成和使用下面的代碼。

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; 
+0

也許我沒有足夠解釋我的問題,上傳和一切工作都很好,但是: 我希望將圖片上傳的網址插入列圖片中,方法是將圖片網址插入圖片字段插入 – sunshinekitty