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

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Werbung

Jetzt auf elektrisches Fahren umstellen, Umwelt schonen und 1.500km kostenlosen Strom von Tesla bekommen. https://ts.la/carsten15473.

Lexip

Neues Mitglied
18 August 2017
8
0
1
19
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... o_O

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? :confused:
 

Lexip

Neues Mitglied
18 August 2017
8
0
1
19
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

Neues Mitglied
18 August 2017
8
0
1
19
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... o_O

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? :confused:

Kann man denn die Farbe der Fortschrittsanzeige ändern?
 

Tronjer

Moderator
Team
Moderator
8 Oktober 2010
5.120
443
83
Berlin
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.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.425
284
83
66
jedoch kann ich den "Durchsuchen..." Button und den dahinterstehenden Text nicht finden...
Dieser Button ist das input-Element vom Typ "file":
Code:
<input name="file" class="button3" type="file" id="fileA" onchange="fileChange();"/>
Zu der Frage, ob und wie Du ihn gestalten bzw. verändern kannst, siehe hier:
https://stackoverflow.com/questions/572768/styling-an-input-type-file-button
Entfernen ist sinnlos, weil er für die Upload-Funktion unerlässlich ist: Wie soll man etwas herauf laden, wenn man die Datei nicht festlegen kann?
 
Werbung:

Latest posts