Werbung:
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):
 Code  <img id="link_filesend" class="img_button" src="img/Bild.png" width="32" height="32" border="0" alt="Bild senden" title="Bild senden" />
>>>>> CHAT.JS <<<<<
>>>>> AB ZEILE 440 (hinzufügen):
Code // 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öß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ä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ß!";
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ä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 mu00f6chtest.');
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):
Code 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):
Code $('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):
Code // ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
// (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öß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ä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ß!";
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ä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 mu00f6chtest.');
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):
Code 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):
Code $("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)
//Nur Linklabel
Code (.*?)\[\/pvi\]/', "<a href=\"$1\" target=\"_blank\">Bild gepostet</a>", $str);
// oder als Vorschau zum Anklicken
Code $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ößern.\"/></a>", $str);
>>>>> AB ZEILE 100 (verändern):
Code $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ößern.\"/></a>";
>>>>> STYLE.CSS <<<<<
>>>>> AM ENDE HINZUFÜGEN (hinzufügen):
Code 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
Code <?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
Code <?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 DES TUTORIALS <<<<< |
Community
Tutorial Übersicht >> 
ET-Chat
787 x gelesen 
Nach Oben
Harlekins Welt
Eingangshalle
Harlekin 
Besprechung
Alle Inhalte unterliegen dem Urheberrecht und dürfen nicht ohne Erlaubnis kopiert werden!