UPDATE mit javascript und Ajax

latinum_1982

Erfahrenes Mitglied
Hallo

ich hab mir ein upload geschrieben was auch gott sei dank funktioniert
die datei wird richtig ordner abgespeichert und die foto name wird in der DB gespeichtert

und jetzt will ich denn der upload erfolgreich war das ein bestimmter Div nachgeladen wird bzw dort sollten alle fotos die man hochgeladen hat sehen

ich hab aber kein plan wie ich das anstellen soll

so schaut mein upload aus

Javascript:
<script language="javascript" type="text/javascript">
<!--

function load(){
		document.getElementById('f1_upload_process').style.visibility = 'hidden';
}

function startUpload(){
      document.getElementById('f1_upload_process').style.visibility = 'visible';
      document.getElementById('f1_upload_form').style.visibility = 'hidden';
      return true;
}

function stopUpload(success){
      var result = '';

	  if (success == 0){
         result = '<span class="emsg">Es gab einen Fehler beim Datei-Upload!<\/span><br/><br/>';
      }
      if (success == 1){
         result = '<span class="msg">Die Datei wurde erfolgreich hochgeladen!<\/span><br/><br/>';
      }
	  if (success == 2){
         result = '<span class="msg">Es d&uuml;rfen nur *.gif, *.jpeg, *.jpg, *.png und *.bmp Dateien hochgeladen werden!<\/span><br/><br/>';
      }
      document.getElementById('f1_upload_process').style.visibility = 'hidden';
      document.getElementById('f1_upload_form').innerHTML = result + '<label><input name="myfile" type="file" size="30" /><\/label><label><input type="submit" name="submitBtn" class="sbtn" value="Upload" /><\/label>';
      document.getElementById('f1_upload_form').style.visibility = 'visible'; 
      return true; 
}

//-->
</script>

der passende HTML

HTML:
            <div class="left"><!-- Left column -->
            
            	<!-- Collapsible. Closed by default -->
            <div class="widget">
                    <div class="head closed" onclick="load();"><h5>Neues Rating Foto Hochladen</h5></div>
                    <div class="body">
						
						<div id="main">	
							<form action="api/upload.php" method="post" enctype="multipart/form-data" target="upload_target" onsubmit="startUpload();" >
								 <p id="f1_upload_process"><img src="img/loader.gif" /></p>
								 <p id="f1_upload_form" align="center"><br/>
								 
									 <label>  
										  <input name="myfile" type="file" size="30" />
									 </label>
									 <label>
										 <input type="submit" name="submitBtn" class="sbtn" value="Upload" />
									 </label>
								
								 </p>
								  <iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
							 </form>

						<div id="response"></div>
							<ul id="image-list">

							</ul>
						</div>
						
					  
					  <script src="api/upload.js"></script>					
					</div>
                <div class="fix"></div>

            </div>


        </div> 

            <div class="right">
            
            	<!-- Support tickets -->
                <div class="widget">												
                    <div class="head"><h5>Aktuelle Rating Fotos</h5><div class="num"><a class="redNum" id="ratemenge">+128</a></div></div>
                    
                    <div class="supTicket nobg">
                    	<div class="issueType">
                        	<span class="issueInfo">Hochladen am</span>
                            <span class="issueNum">[ DATUM ]</span>
                            <div class="fix"></div>
                        </div>
                        
							<div class="issueSummary">
								<a href="#" title="" class="floatleft"><img src="images/user.png" alt="" /></a>	
								<div class="ticketInfo">
									<ul>
										<li>Rate Status</li>
										<li class="even"><strong class="green">[ Aktiv ]</strong> | <strong class="red">[ Deaktiv ]</strong></li>
										<li>Upload am: </li>
										<li class="even"> [ DATUM ]</li>
									</ul>
									<div class="fix"></div>
								</div>
							</div>
                            <div class="fix"></div>
                        </div> 
                    </div>
                    

                    
                  
                </div>

div left ist upload und bei div right sollten bisher hochgeladenen fotos zusehen

und das php upload

PHP:
session_start();
include('../class/db_conf.php');
$result = 0;

//ENDUNGSPRÜFUNG
  $erlaubt = array('.jpg', '.jpeg', '.gif', '.png');
  $dateiendung = strtolower(strrchr($_FILES['myfile']['name'], '.'));
  if(!in_array($dateiendung, $erlaubt)){
	$result = 2;
	sleep(2);
  }
  



	
if($result == 0){
	$destination_path = "../user_rating_photos/".DIRECTORY_SEPARATOR;
	$tmp_name = $_FILES['myfile']['tmp_name'];
	$name = $_FILES['myfile']['name'];
	
	$target_path = $destination_path . basename( $_SESSION['user_id']."_".$name);
	$image = $_SESSION['user_id']."_".time();
	
	if(@move_uploaded_file($tmp_name, $target_path)) {
	$fotoname = $_SESSION['user_id']."_".$name;
		
		$sql = 'INSERT INTO user_rate_photos
						(foto, user_id, date)
						VALUES
						(?, ?, NOW())';
		$stmt = $db->prepare($sql);
		$stmt->bind_param('si', $fotoname, $_SESSION['user_id']);
		$stmt->execute();
		$stmt->close();
		
		$result = 1;
	}
	sleep(1);
}
?>

<script language="javascript" type="text/javascript">window.top.window.stopUpload(<?php echo $result; ?>);</script>
 
Zuletzt bearbeitet von einem Moderator: