Frage Wie bekomme ich diesen Button/Text weg? :P

Lexip · 18 August 2017

Hey. :)
Ich habe mir von einer Website einen Quelltext für eine "Upload-Seite" heruntergeladen und habe diesen bearbeitet (Buuton, Schriftart, ect.)
Ich habe die beiden Buttons: "Upload" und "Cancel" bereits bearbeitet, jedoch kann ich den "Durchsuchen..." Button und den dahinterstehenden Text nicht finden...

Besagte Website: http://u.lexip.me/I/

index.html:

HTML:

<!doctype html>

<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Play" rel="stylesheet">
<meta charset="utf-8">
<title>Upload</title>
</head>

    
<!-- -------------------------------------------------------------------------------------------- -->   

    
<style type="text/css">

.roboto {
    font-family: 'Play', sans-serif;
        }
.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 8px 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 0px 0px;
    -webkit-transition-duration: 1.9s; /* Safari */
    transition-duration: 1.9s;
    cursor: pointer;
    font-family: 'Play', sans-serif;
}

.button1 {
    background-color: #00BD09;
    color: white;
    border: 1px solid #00BD09;
    border-radius: 4px;
    font-family: 'Play', sans-serif;
    font-size: 16px;
}

.button1:hover {
    background-color: #00D50B;
    color: white;
    border: 1px solid #00D50B;
    border-radius: 50px;
    font-family: 'Play', sans-serif;
    font-size: 18px;
}

.button2 {
    background-color: #E30000;
    color: white;
    border: 1px solid #E30000;
    border-radius: 4px;
    font-family: 'Play', sans-serif;
    font-size: 16px;
}

.button2:hover {
    background-color: #F50000;
    color: white;
    border: 1px solid #F50000;
    border-radius: 50px;
    font-family: 'Play', sans-serif;
    font-size: 18px;
}

.button3 {
    background-color: white;
    color: black;
    border: 0px solid #f44336;
    border-radius: 4px;
    font-family: 'Play', sans-serif;
    font-size: 16px;
}

.button3:hover {
    background-color: #ffffff;
    color: lightblue;
    border: 0px solid grey;
    border-radius: 0px;
    font-family: 'Play', sans-serif;
    font-size: 16px;
}
    
    </style>

    
<!-- -------------------------------------------------------------------------------------------- -->       
    
    
<body>
<script type="text/javascript">


function fileChange()
{
    //FileList Objekt aus dem Input Element mit der ID "fileA"
    var fileList = document.getElementById("fileA").files;
 
    //File Objekt (erstes Element der FileList)
    var file = fileList[0];
 
    //File Objekt nicht vorhanden = keine Datei ausgewählt oder vom Browser nicht unterstützt
    if(!file)
        return;
 
    document.getElementById("fileName").innerHTML = 'Dateiname: ' + file.name;
    document.getElementById("fileSize").innerHTML = 'Dateigröße: ' + file.size + ' B';
    document.getElementById("fileType").innerHTML = 'Dateitype: ' + file.type;
    document.getElementById("progress").value = 0;
    document.getElementById("prozent").innerHTML = "0%";
}

var client = null;

function uploadFile()
{
    //Wieder unser File Objekt
    var file = document.getElementById("fileA").files[0];
    //FormData Objekt erzeugen
    var formData = new FormData();
    //XMLHttpRequest Objekt erzeugen
       client = new XMLHttpRequest();
    
    var prog = document.getElementById("progress");
 
    if(!file)
        return;
 
    prog.value = 0;
    prog.max = 100;
 
    //Fügt dem formData Objekt unser File Objekt hinzu
    formData.append("datei", file);
 
    client.onerror = function(e) {
        alert("Error");
    };
 
    client.onload = function(e) {
        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 + "%";
    };
    
    client.onabort = function(e) {
        window.location.replace(window.location.pathname + window.location.search + window.location.hash);
    };
 
    client.open("POST", "upload.php");
    client.send(formData);
}

function uploadAbort() {
    if(client instanceof XMLHttpRequest)
        //Briecht die aktuelle Übertragung ab
        client.abort();
}
</script>

    
<!-- -------------------------------------------------------------------------------------------- -->       
    

    
<center>
<form action="" method="post" enctype="multipart/form-data">
                         <input name="file" class="button3" type="file" id="fileA" onchange="fileChange();"/>
<hr color="lightgrey" size="1px" noshade>
                        <input name="upload" value="Upload" type="button" class="button1" onclick="uploadFile();" />
&nbsp;&nbsp;
                           <input name="abort" value="Cancel" type="button" class="button2" onclick="uploadAbort();" />
 </form>


<!-- -------------------------------------------------------------------------------------------- -->   
    
    
 <progress id="progress" style="margin-top:10px"></progress>
<br>
<font class="roboto" color="grey" size="2"><span id="prozent"></span><font>

<!-- -------------------------------------------------------------------------------------------- -->
    
</div>
</body>
</html>

upload.php:

PHP:

<?php
if (isset($_FILES['datei']))
{
    move_uploaded_file($_FILES['datei']['tmp_name'], 'upload/'.$_FILES['datei']['name']);
}
?>

Wer hat den Button/Text gefunden?

Sailor · 18 August 2017

Da ist nichts zu finden - das wird vom Browser generiert. Siehe input type=file
https://wiki.selfhtml.org/wiki/HTML/Formulare/input/Datei-Upload

Lexip · 18 August 2017

Und wie bekomme ich es hin, dass wenn der Upload zu 100% abgeschlossen ist, dass dann automatisch uaf eine andere Seite weitergeleitet wird? (Ich glaube Variable "p")

Lexip · 18 August 2017

Sailor schrieb:
Da ist nichts zu finden - das wird vom Browser generiert. Siehe input type=file
https://wiki.selfhtml.org/wiki/HTML/Formulare/input/Datei-Upload

Irgendwie ungewöhnlich, dass es vei so ´nem "Drecksbutton" bleibt... :)

Lexip · 18 August 2017

Lexip schrieb:

Hey. :)
Ich habe mir von einer Website einen Quelltext für eine "Upload-Seite" heruntergeladen und habe diesen bearbeitet (Buuton, Schriftart, ect.)
Ich habe die beiden Buttons: "Upload" und "Cancel" bereits bearbeitet, jedoch kann ich den "Durchsuchen..." Button und den dahinterstehenden Text nicht finden...

Besagte Website: http://u.lexip.me/I/

index.html:

HTML:

<!doctype html>

<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Play" rel="stylesheet">
<meta charset="utf-8">
<title>Upload</title>
</head>

   
<!-- -------------------------------------------------------------------------------------------- -->  

   
<style type="text/css">

.roboto {
    font-family: 'Play', sans-serif;
        }
.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 8px 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 0px 0px;
    -webkit-transition-duration: 1.9s; /* Safari */
    transition-duration: 1.9s;
    cursor: pointer;
    font-family: 'Play', sans-serif;
}

.button1 {
    background-color: #00BD09;
    color: white;
    border: 1px solid #00BD09;
    border-radius: 4px;
    font-family: 'Play', sans-serif;
    font-size: 16px;
}

.button1:hover {
    background-color: #00D50B;
    color: white;
    border: 1px solid #00D50B;
    border-radius: 50px;
    font-family: 'Play', sans-serif;
    font-size: 18px;
}

.button2 {
    background-color: #E30000;
    color: white;
    border: 1px solid #E30000;
    border-radius: 4px;
    font-family: 'Play', sans-serif;
    font-size: 16px;
}

.button2:hover {
    background-color: #F50000;
    color: white;
    border: 1px solid #F50000;
    border-radius: 50px;
    font-family: 'Play', sans-serif;
    font-size: 18px;
}

.button3 {
    background-color: white;
    color: black;
    border: 0px solid #f44336;
    border-radius: 4px;
    font-family: 'Play', sans-serif;
    font-size: 16px;
}

.button3:hover {
    background-color: #ffffff;
    color: lightblue;
    border: 0px solid grey;
    border-radius: 0px;
    font-family: 'Play', sans-serif;
    font-size: 16px;
}
   
    </style>

   
<!-- -------------------------------------------------------------------------------------------- -->      
   
   
<body>
<script type="text/javascript">


function fileChange()
{
    //FileList Objekt aus dem Input Element mit der ID "fileA"
    var fileList = document.getElementById("fileA").files;
 
    //File Objekt (erstes Element der FileList)
    var file = fileList[0];
 
    //File Objekt nicht vorhanden = keine Datei ausgewählt oder vom Browser nicht unterstützt
    if(!file)
        return;
 
    document.getElementById("fileName").innerHTML = 'Dateiname: ' + file.name;
    document.getElementById("fileSize").innerHTML = 'Dateigröße: ' + file.size + ' B';
    document.getElementById("fileType").innerHTML = 'Dateitype: ' + file.type;
    document.getElementById("progress").value = 0;
    document.getElementById("prozent").innerHTML = "0%";
}

var client = null;

function uploadFile()
{
    //Wieder unser File Objekt
    var file = document.getElementById("fileA").files[0];
    //FormData Objekt erzeugen
    var formData = new FormData();
    //XMLHttpRequest Objekt erzeugen
       client = new XMLHttpRequest();
   
    var prog = document.getElementById("progress");
 
    if(!file)
        return;
 
    prog.value = 0;
    prog.max = 100;
 
    //Fügt dem formData Objekt unser File Objekt hinzu
    formData.append("datei", file);
 
    client.onerror = function(e) {
        alert("Error");
    };
 
    client.onload = function(e) {
        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 + "%";
    };
   
    client.onabort = function(e) {
        window.location.replace(window.location.pathname + window.location.search + window.location.hash);
    };
 
    client.open("POST", "upload.php");
    client.send(formData);
}

function uploadAbort() {
    if(client instanceof XMLHttpRequest)
        //Briecht die aktuelle Übertragung ab
        client.abort();
}
</script>

   
<!-- -------------------------------------------------------------------------------------------- -->      
   

   
<center>
<form action="" method="post" enctype="multipart/form-data">
                         <input name="file" class="button3" type="file" id="fileA" onchange="fileChange();"/>
<hr color="lightgrey" size="1px" noshade>
                        <input name="upload" value="Upload" type="button" class="button1" onclick="uploadFile();" />
&nbsp;&nbsp;
                           <input name="abort" value="Cancel" type="button" class="button2" onclick="uploadAbort();" />
 </form>


<!-- -------------------------------------------------------------------------------------------- -->  
   
   
 <progress id="progress" style="margin-top:10px"></progress>
<br>
<font class="roboto" color="grey" size="2"><span id="prozent"></span><font>

<!-- -------------------------------------------------------------------------------------------- -->
   
</div>
</body>
</html>

upload.php:

PHP:

<?php
if (isset($_FILES['datei']))
{
    move_uploaded_file($_FILES['datei']['tmp_name'], 'upload/'.$_FILES['datei']['name']);
}
?>

Wer hat den Button/Text gefunden?

Kann man denn die Farbe der Fortschrittsanzeige ändern?

Lexip · 18 August 2017

Sailor schrieb:
Da ist nichts zu finden - das wird vom Browser generiert. Siehe input type=file
https://wiki.selfhtml.org/wiki/HTML/Formulare/input/Datei-Upload

Also kann man den Button auch nicht entfernen...oder?
Und wie sieht´s aus mit vergrößern?

Tronjer · 18 August 2017

Du könntest es so machen wie alle anderen auch: Grundlagenkenntnisse in der Webentwicklung erwerben. Ohne das wird dir auch ein Forum wie dieses kaum weiterhelfen.

Lexip · 18 August 2017

Tronjer schrieb:
Du könntest es so machen wie alle anderen auch: Grundlagenkenntnisse in der Webentwicklung erwerben. Ohne das wird dir auch ein Forum wie dieses kaum weiterhelfen.

Und wo genau kann ich das?
PS: Das ist keine Antwort auf meine Frage, Mister Moderator

Frage Wie bekomme ich diesen Button/Text weg? :P

Lexip

Neues Mitglied

Sailor

Aktives Mitglied

Lexip

Neues Mitglied

Lexip

Neues Mitglied

Lexip

Neues Mitglied

Lexip

Neues Mitglied

Tronjer

Senior HTML'ler

Lexip

Neues Mitglied

Neueste Beiträge