Einbauanleitung für einen einfachen mit Fortschrittsbalken überwachten Upload  für Bilder, die direkt im Öffi, im PV-Balken oder im PV-Fenster angezeigt werden: 

Hier stehen die jeweiligen Dateien und was verändert oder hinzugefügt werden muss. Die Zeilenangaben orientieren sich an den Standarddateien, wie sie im Originalarchiv des Downloads zu finden sind. Wo das in euren modifizierten Dateien ist, müsst ihr euch raussuchen. Die Angabe dient nur zur groben Orientierung. Eine Demo davon kann man sich hier https://diecoolies2punkt0.bigone1.net/ anschauen. 
Als kleine Anerkennung für meine Mühe würde ich euch bitten, dass ihr den fizfooter unverändert drin lasst.

Es empfiehlt sich übrigens in den Uploadregeln oder den Regeln allgemein folgenden Hinweis anzubringen:
Wir übernehmen nach §7(2) TMG keinerlei Haftung für den Inhalt der von Nutzern hochgeladenen Bildern und/oder Dateien.

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>                                      CHAT.TPL.HTML                                     <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

>>>>> AB ZEILE 83 (verändern):

<img id="link_filesend" class="img_button" src="img/Bild.png" width="32" height="32" border="0" alt="Bild senden" title="Bild senden" />&nbsp;&nbsp;&nbsp;





>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>                                      CHAT.JS                                     <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

>>>>> AB ZEILE 440 (hinzufügen):

// Klick auf Filesend

$("link_filesend").onclick = function(){
	    var filsendwin = new Window({className: self.win_style, title:"Bildupload", width:400, height:200, top:eval(self.mouse_top-315), left:eval(self.mouse_left-120), resizable: false, showEffect:Effect.Appear, hideEffect: Effect.Fade, showEffectOptions: {duration:0.5}, hideEffectOptions: {duration:0.5}, draggable: true, minimizable: false, maximizable: false, destroyOnClose: true, opacity: 1});
            filsendwin.setHTMLContent('<center><div id="Filesendmain"><div id="Ergebnis"></div><br/><progress id="progress" style="margin-top:10px"></progress><span id="prozent"></span><form enctype="multipart/form-data" action="javascript:;" method="post"><input type="file" name="file" id="fileA" onchange="fileChange();"/><br/><br/>(Max. Gr&ouml;&szlig;e 10MB)<br/><br/><input type="Checkbox" name="rulescheck" id="rulescheck" value="">Ich akzeptiere die <a href="HIER DEN LINK ZU DEN UPLOADREGELN SETZEN" target="_blank">Uploadregeln.</a><br/><br/><input name="submit" id="Laden" type="submit" value="Bild hochladen" class="button" /></form><br/><br/><div id="fizfooter">Uploadscript by Fizzy Lemon</div></center>');
            document.getElementById("progress").style.display = "none";
            document.getElementById("prozent").style.display = "none";
            document.getElementById("Ergebnis").style.color = "black";
            document.getElementById("Ergebnis").innerHTML = "Bitte w&auml;hlen Sie eine Bilddatei:";
		  
$("fileA").onchange = function()
{
    var fileList = document.getElementById("fileA").files;
    var file = fileList[0];
 
    if(!file)
        return;
    if(file.size > 10485760){
	      document.getElementById("progress").style.display = "none";
          document.getElementById("prozent").style.display = "none";
          document.getElementById("Ergebnis").style.display = "block";
    	  document.getElementById("Ergebnis").style.color = "red";
          document.getElementById("Ergebnis").innerHTML = "Datei zu gro&szlig;!";
		  document.getElementById("fileA").value = "";
          } else {
  
    document.getElementById("Ergebnis").style.display = "none";
    document.getElementById("progress").style.display = "block";
    document.getElementById("prozent").style.display = "block";
    document.getElementById("progress").value = 0;
    document.getElementById("prozent").innerHTML = "0%";
 }
    if(file.type == "image/jpeg" || file.type == "image/png" || file.type == "image/gif"){
	                             document.getElementById("progress").value = 0;
                                 document.getElementById("prozent").innerHTML = "0%";
                                 } else {
                                    document.getElementById("progress").style.display = "none";
                                    document.getElementById("prozent").style.display = "none";
                                    document.getElementById("Ergebnis").style.display = "block";
    	                            document.getElementById("Ergebnis").style.color = "red";
                                    document.getElementById("Ergebnis").innerHTML = "Unzul&auml;ssiger Dateityp!";
		                            document.getElementById("fileA").value = "";
                                 
                                       }
 }

var client = null;

$("Laden").onclick = function()
{
if(!$('rulescheck').checked) {
alert('Du musst unseren Uploadregeln zustimmen, wenn Du Bilder hochladen m\u00f6chtest.');
return false;
}
   var file = document.getElementById("fileA").files[0];
    var formData = new FormData();
    formData.append("raum", $("room").value);
    formData.append("privat", $("privat").value);
   	client = new XMLHttpRequest();
	
    var prog = document.getElementById("progress");
 
    if(!file)
        return;
 
    prog.value = 0;
    prog.max = 100;
 
    formData.append("file", file);
    
    client.onerror = function(e) {
        alert("onError");
    };
 
    client.onload = function(e) {
         if (client.status == 200) {
             document.getElementById("progress").style.display = "none";
             document.getElementById("prozent").style.display = "none";
             document.getElementById("Ergebnis").style.display = "block";
             document.getElementById("Ergebnis").style.color = "green";
             document.getElementById("Ergebnis").innerHTML = "Datei erfolgreich hochgeladen!";
             document.getElementById("fileA").value = "";
          } else {
          document.getElementById("progress").style.display = "none";
          document.getElementById("prozent").style.display = "none";
          document.getElementById("Ergebnis").style.display = "block";
          document.getElementById("Ergebnis").style.color = "red";
          document.getElementById("Ergebnis").innerHTML = "Upload gescheitert! (Error " + client.status + ")";
          document.getElementById("fileA").value = "";
          }
        document.getElementById("prozent").innerHTML = "100%";
        prog.value = prog.max;
    };
 
    client.upload.onprogress = function(e) {
		var p = Math.round(100 / e.total * e.loaded);
        document.getElementById("progress").value = p;            
        document.getElementById("prozent").innerHTML = p + "% hochgeladen";
    };
	
    client.open("POST", "./?filesend");
    client.send(formData);
}

 // Ist dass Fenster bereits sichtbar?
            if($(filsendwin.getId()).style.display=='none'){
            	filsendwin.show();
            	filsendwin.toFront();
            }
            else filsendwin.close();


	}


>>>>>  AB ZEILE 660 (verändern):

self.win_private[win_id1[count_priv_win]].setHTMLContent('<div id="pivate_win_'+win_id1[count_priv_win]+'" class="privat_mesages_window"></div><div><form style="display:inline" id="win_form_'+win_id1[count_priv_win]+'"><table cellspacing="0" cellpadding="0"><tr><td><input type="hidden" id="this_win_'+self.win_private[win_id1[count_priv_win]].getId()+'" value="'+win_id1[count_priv_win]+'"><input type="text" class="private_message_field" id="message_win_'+win_id1[count_priv_win]+'" ></td><td><img src="img/Checked_small.png" id="submit_img_'+win_id1[count_priv_win]+'" style="padding-left: 4px; cursor:pointer;"></td><td><img src="img/Smiley_small.png" id="smileys_img_'+win_id1[count_priv_win]+'" style="padding-left: 4px; cursor:pointer;"></td><td><img src="img/Bild.png" id="filesend2win_'+win_id1[count_priv_win]+'" style="padding-left: 4px;width: 16px; height: 16px; cursor:pointer;"></td></tr></table></form></div></div>');


>>>>>  AB ZEILE 687 (hinzufügen):

$('filesend2win_'+win_id1[count_priv_win]).onclick = function(e) {
    var tid = this.id.replace('filesend2win_','message_win_');
    self.filesend2privatwin(tid, user_id);
	return false;
};


>>>>>  AB ZEILE 925 (hinzufügen):

// ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
// (Start) Filesend nur für PrivatWin -------
this.filesend2privatwin = function(message_input_field, privat2id)
{
				 				    
				 				    var filesend2win = new Window({className: self.win_style, title:"Bildupload pv", width:400, height:200, top:eval(self.mouse_top-215), left:eval(self.mouse_left-120), resizable: false, showEffect:Effect.Appear, hideEffect: Effect.Fade, showEffectOptions: {duration:0.5}, hideEffectOptions: {duration:0.5}, draggable: true, minimizable: false, maximizable: false, destroyOnClose: true, opacity: 1});
                                filesend2win.setHTMLContent('<center><div id="Filesendmain"><div id="Ergebnis"></div><br/><progress id="progress" style="margin-top:10px"></progress><span id="prozent"></span><form enctype="multipart/form-data" action="javascript:;" method="post"><input type="file" name="file" id="fileA" onchange="fileChange();"/><br/><br/>(Max. Gr&ouml;&szlig;e 10MB)<br/><br/><input type="Checkbox" name="rulescheck_privat" id="rulescheck_privat" value="">Ich akzeptiere die <a href="HIER DEN LINK ZU DEN UPLOADREGELN SETZEN" target="_blank">Uploadregeln.</a><br/><br/><input name="submit" id="Laden_privat" type="submit" value="Bild hochladen" class="button" /></form><br/><br/><div id="fizfooter">Uploadscript by Fizzy Lemon</div></center>');
                                document.getElementById("progress").style.display = "none";
                                document.getElementById("prozent").style.display = "none";
                                document.getElementById("Ergebnis").style.color = "black";
                                document.getElementById("Ergebnis").innerHTML = "Bitte w&auml;hlen Sie eine Bilddatei:";
          
                                $("fileA").onchange = function()
                                {
                                var fileList = document.getElementById("fileA").files;
 
                                var file = fileList[0];
 
                                 if(!file)
                                 return;
                                 if(file.size > 10485760){
	                                document.getElementById("progress").style.display = "none";
                                    document.getElementById("prozent").style.display = "none";
                                    document.getElementById("Ergebnis").style.display = "block";
    	                            document.getElementById("Ergebnis").style.color = "red";
                                    document.getElementById("Ergebnis").innerHTML = "Datei zu gro&szlig;!";
		                            document.getElementById("fileA").value = "";
                                 } else {
  
                                 document.getElementById("Ergebnis").style.display = "none";
                                 document.getElementById("progress").style.display = "block";
                                 document.getElementById("prozent").style.display = "block";
                                 document.getElementById("progress").value = 0;
                                 document.getElementById("prozent").innerHTML = "0%";
                                       }
                                 if(file.type == "image/jpeg" || file.type == "image/png" || file.type == "image/gif"){
	                             document.getElementById("progress").value = 0;
                                 document.getElementById("prozent").innerHTML = "0%";
                                 } else {
                                    document.getElementById("progress").style.display = "none";
                                    document.getElementById("prozent").style.display = "none";
                                    document.getElementById("Ergebnis").style.display = "block";
    	                            document.getElementById("Ergebnis").style.color = "red";
                                    document.getElementById("Ergebnis").innerHTML = "Unzul&auml;ssiger Dateityp!";
		                            document.getElementById("fileA").value = "";
                                 
                                       }
                                 }
                                 var client = null;

                                 $("Laden_privat").onclick = function()
                                 {
                                   if(!$('rulescheck_privat').checked) {
                                   alert('Du musst unseren Uploadregeln zustimmen, wenn Du Bilder hochladen m\u00f6chtest.');
                                   return false;
                                        }
                                 var file = document.getElementById("fileA").files[0];
                                 var formData = new FormData();
                                 formData.append("raum", $("room").value);
                                 formData.append("privat", privat2id);
                                 client = new XMLHttpRequest();
	
                                 var prog = document.getElementById("progress");
 
                                 if(!file)
                                 return;
 
                                prog.value = 0;
                                prog.max = 100;
 
                                formData.append("file", file);
    
                                client.onerror = function(e) {
                                alert("onError");
                                };
 
                                client.onload = function(e) {
                                    if (client.status == 200) {
                                    document.getElementById("progress").style.display = "none";
                                    document.getElementById("prozent").style.display = "none";
                                    document.getElementById("Ergebnis").style.display = "block";
                                    document.getElementById("Ergebnis").style.color = "green";
                                    document.getElementById("Ergebnis").innerHTML = "Datei erfolgreich hochgeladen!";
                                    document.getElementById("fileA").value = "";
                                    } else {
                                    document.getElementById("progress").style.display = "none";
                                    document.getElementById("prozent").style.display = "none";
                                    document.getElementById("Ergebnis").style.display = "block";
                                    document.getElementById("Ergebnis").style.color = "red";
                                    document.getElementById("Ergebnis").innerHTML = "Upload gescheitert! (Error " + client.status + ")";
                                    document.getElementById("fileA").value = "";
                                    }
                                
                                document.getElementById("prozent").innerHTML = "100%";
                                prog.value = prog.max;
                                };
 
                                client.upload.onprogress = function(e) {
		                        var p = Math.round(100 / e.total * e.loaded);
                                document.getElementById("progress").value = p;            
                                document.getElementById("prozent").innerHTML = p + "% hochgeladen";
                                };
	
                                client.open("POST", "./?filesend2win");
                                client.send(formData);
                                }

                               // Ist dass Fenster bereits sichtbar?
                                  if($(filesend2win.getId()).style.display=='none'){
            	                    filesend2win.show();
            	                    filesend2win.toFront();
                                  }
                                  else filesend2win.close();

			                      }

// (Stop) Filesend nur für PrivatWin -------
// ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
						



>>>>>  AB ZEILE 1196 (verändern):

self.win_private[win_id1].setHTMLContent('<div id="pivate_win_'+win_id1+'" class="privat_mesages_window"></div><div><form style="display:inline" id="win_form_'+win_id1+'"><table cellspacing="0" cellpadding="0"><tr><td><input type="text" class="private_message_field" id="message_win_'+win_id1+'" ></td><td><img src="img/Checked_small.png" id="submit_img_'+win_id1+'" style="padding-left: 4px; cursor:pointer;"></td><td><img src="img/Smiley_small.png" id="smileys_img_'+win_id1+'" style="padding-left: 4px; cursor:pointer;"></td><td><img src="img/Bild.png" id="filesend2privatewin_'+win_id1+'" alt="filesend2privatewin" title="Bild pv senden" style="padding-left: 4px;width: 16px; height: 16px; cursor:pointer;"></td></tr></table></form></div></div>');




>>>>>  AB ZEILE 1219 (hinzufügen):

$("filesend2privatewin_"+win_id1).onclick = function(){
    self.filesend2privatwin('message_win_'+win_id1, privat2id);
	return false;
}







>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>                                      STATICMETHODS.CLASS.PHP                                     <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

>>>>> AB ZEILE 43 (hinzufügen):
(sucht euch eine Methode aus, wie ihr die gesendeten Bilder im pv-Fenster darstellen wollt. Löscht die Zeilen oder kommentiert aus)

$str = preg_replace('/\[pvi\](.*?)\[\/pvi\]/', "<a href=\"$1\" target=\"_blank\">Bild gepostet</a>", $str); //Nur Linklabel

$str = preg_replace('/\[pvi\](.*?)\[\/pvi\]/',"<a href=\"$1\" target=\"_blank\"><img src=\"$1\" style=\"width:160px;height:auto;\" alt=\"Bild gepostet\" title=\"Klicken, um das Bild zu vergr&ouml;&szlig;ern.\"/></a>", $str); // oder als Vorschau zum Anklicken



>>>>> AB ZEILE 100 (verändern):

$str="<a href=\"$image_path\" target=\"_blank\"><img src=\"$image_path\" style=\"max-width:500px;max-height:300px;\" alt=\"Bild gepostet\" title=\"Klicken, um das Bild zu vergr&ouml;&szlig;ern.\"/></a>";





>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>                                      STYLE.CSS                                     <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

>>>>> AM ENDE HINZUFÜGEN (hinzufügen):

progress[value] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
   border: none; 
  width: 250px;
  height: 20px;
}

progress[value]::-webkit-progress-bar {
  background-color: #eee;
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}

progress[value]::-webkit-progress-value {
  background-image:
	   -webkit-linear-gradient(-45deg, 
	                           transparent 33%, rgba(0, 0, 0, .1) 33%, 
	                           rgba(0,0, 0, .1) 66%, transparent 66%),
	   -webkit-linear-gradient(top, 
	                           rgba(255, 255, 255, .25), 
	                           rgba(0, 0, 0, .25)),
	   -webkit-linear-gradient(left, #006633, #00ff66);

    border-radius: 2px; 
    background-size: 35px 20px, 100% 100%, 100% 100%;
}

progress[value]::-moz-progress-bar { 
  background-image:
    -moz-linear-gradient(
      135deg, 
      transparent 33%, 
      rgba(0, 0, 0, 0.1) 33%, 
      rgba(0, 0, 0, 0.1) 66%, 
      transparent 66% 
    ),
    -moz-linear-gradient(
      top, 
      rgba(255, 255, 255, 0.25), 
      rgba(0, 0, 0, 0.25)
    ),
    -moz-linear-gradient(
      left, 
      #006633, 
      #00ff66
    );

  border-radius: 2px; 
  background-size: 35px 20px, 100% 100%, 100% 100%; 
}

#Filesendmain{
 width: 90%;
 padding: 6px;
 overflow: hidden; 
 background-image: linear-gradient(to top, rgba(241,255,238,1) 20%, rgba(241,255,238,0) 90%);
 border-radius: 8px;
 }
 
#fizfooter{
 color: #1f4f1e;
 font-size: x-small;
 }




>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>                                      FILESEND.CLASS.PHP                                     <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

>>>>>>>>>>>>>>>>>>  (KOMPLETT NEU ERSTELLEN):

<?php

class filesend extends DbConectionMaker
{

	public function __construct (){ 
		
		// call parent Constructor from class DbConectionMaker
		parent::__construct(); 
		
		session_start();
		
		header('Cache-Control: no-store, no-cache, must-revalidate, pre-check=0, post-check=0, max-age=0');
		// Sets charset and content-type for index.php
		header('content-type: text/html; charset=utf-8');
		
			$filedir = 'EUER UPLOADVERZEICHNIS'; // Uploadverzeichnis  + Muss CHMOD 777 sein!
            $accepted = array('png', 'jpg', 'jpeg', 'gif');
	   	
			$roomId = $_POST['raum'];
            			 
    	if (isset($_FILES['file']))
{
                preg_match('/\.([a-zA-Z]+?)$/', $_FILES['file']['name'], $matches);
         if(in_array(strtolower($matches[1]), $accepted)) {
                    $newname = md5_file($_FILES['file']['tmp_name']).'.'.$matches[1];
               move_uploaded_file($_FILES['file']['tmp_name'], $filedir.'/'.$newname);

            $imgurl = 'https://'.$_SERVER['HTTP_HOST'].preg_replace('/\/([^\/]+?)$/', '/', $_SERVER['PHP_SELF']).$filedir.'/'.$newname;
            	
    			
    			$this->dbObj->sqlSet("INSERT INTO {$this->_prefix}etchat_messages (etchat_user_fid, etchat_text, etchat_text_css, etchat_timestamp, etchat_fid_room, etchat_privat, etchat_user_ip) 
    			VALUES ( '".$_SESSION['etchat_'.$this->_prefix.'user_id']."', '[img]".$imgurl."[/img]', 'color:black;font-weight:normal;font-style:normal;', ".date('U').", '".$roomId."', '".(int)$_POST['privat']."', '".$_SERVER['REMOTE_ADDR']."')");
    			
    			$this->dbObj->close();
			
		}
	}
}
}





>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>                                      FILESEND2WIN.CLASS.PHP                                     <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

>>>>>>>>>>>>>>>>>>  (KOMPLETT NEU ERSTELLEN):

<?php

class filesend2win extends DbConectionMaker
{

	public function __construct (){ 
		
		// call parent Constructor from class DbConectionMaker
		parent::__construct(); 
		
		session_start();
		
		header('Cache-Control: no-store, no-cache, must-revalidate, pre-check=0, post-check=0, max-age=0');
		// Sets charset and content-type for index.php
		header('content-type: text/html; charset=utf-8');
		
			$filedir = 'EUER UPLOADVERZEICHNIS'; // Uploadverzeichnis  + Muss CHMOD 777 sein!
            $accepted = array('png', 'jpg', 'jpeg', 'gif');
	   	
			$roomId = $_POST['raum'];
            $private_flag = $_POST['privat'];
            if ($private_flag > 0){
				 $pflag = "/window:";
			 } else {
				 $pflag = "";
			 }
			 
    	if (isset($_FILES['file']))
{
                preg_match('/\.([a-zA-Z]+?)$/', $_FILES['file']['name'], $matches);
         if(in_array(strtolower($matches[1]), $accepted)) {
                    $newname = md5_file($_FILES['file']['tmp_name']).'.'.$matches[1];
               move_uploaded_file($_FILES['file']['tmp_name'], $filedir.'/'.$newname);

            $imgurl = 'https://'.$_SERVER['HTTP_HOST'].preg_replace('/\/([^\/]+?)$/', '/', $_SERVER['PHP_SELF']).$filedir.'/'.$newname;
            
           	$this->dbObj->sqlSet("INSERT INTO {$this->_prefix}etchat_messages (etchat_user_fid, etchat_text, etchat_text_css, etchat_timestamp, etchat_fid_room, etchat_privat, etchat_user_ip) 
    		VALUES ( '".$_SESSION['etchat_'.$this->_prefix.'user_id']."', '".$pflag."[pvi]".$imgurl."[/pvi]', 'color:black;font-weight:normal;font-style:normal;', ".date('U').", '".$roomId."', '".(int)$_POST['privat']."', '".$_SERVER['REMOTE_ADDR']."')");
     			
    			$this->dbObj->close();
			}
}
}
}




>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> ENDE <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<