Verwenden des Menüs zum Hochladen von Dateien

Question

Hey Leute, ich habe ein Problem mit dem Upload. Okay, so weiß ich, das grundlegende Upload so etwas wie dies

<form action="upload.php" method="post" enctype="multipart/form-data"> 
    Select image to upload: 
    <input type="file" name="fileToUpload" id="fileToUpload"> 
    <input type="submit" value="Upload Image" name="submit"> 
</form> 

Dann einen kleiner PHP-Skript gehen würde, die eigentliche Datei laden (Speicher etc ..) Das Problem ist jetzt, dass ich nicht will, eine Eingabe verwenden, zu tun das, gibt es einen Weg, es ohne die Eingabe zu tun? Wie zum Beispiel ein Menü (Absatz href) dann einfach draufklicken und zum Hochladen verwenden? Weil ich das tun möchte, indem ich eine einzelne Zeile auf der Seite benutze, wie zum Beispiel "Profilbild ändern" und sie wählen das aus, ka boom. Ich möchte nicht 2 Knöpfe dafür haben.

Answer 1

können Sie das Formular ausblenden und haben jedes Element auslösen es über Javascript/jQuery:

///html 

    <p class="form"> 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt perferendis harum laboriosam, tempora expedita, quis reiciendis quos, vel non inventore voluptate velit? Expedita, asperiores impedit. 
</p> 
<form action="//" method="post" enctype="multipart/form-data" style="display: none"> 
    Select image to upload: 
    <input type="file" name="fileToUpload" id="fileToUpload"> 
    <input type="submit" value="Upload Image" name="submit"> 
</form> 

///javascript 
$(document).ready(function(){ 
    $('.form').on('click', function(e){ 
    e.preventDefault(); 
    $('#fileToUpload').trigger('click'); 
    }) 
}) 

https://jsfiddle.net/x3fecnqy/

Answer 2

So möchten Sie in eine Taste einreichen und hochladen. Wie hier im Inneren Menü ist eine Demo

fiddleWithOutPrivew Wenn Sie hier eine andere FiddlewithTHumbview

$('#upload').on('click', function() { 
 
    $('#fileToUpload').trigger('click'); 
 

 
}); 
 
$('#upload').change(function() { 
 
    $('#img_up').submit(); 
 
});

form { 
 
    display: none; 
 
} 
 

 
header { 
 
    background-color: #333; 
 
    padding: 10px 0; 
 
} 
 

 
header ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
} 
 

 
header ul li { 
 
    display: inline-block; 
 
    position: relative; 
 
    padding: 10px; 
 
} 
 

 
.menu a { 
 
    color: #fff; 
 
    text-decoration: none; 
 
} 
 

 
.menu a:hover, 
 
.menu a:focus, 
 
.menu a:active { 
 
    color: #bbb; 
 
} 
 

 

<script 
 
    src="https://code.jquery.com/jquery-3.1.1.min.js" 
 
    integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
 
    crossorigin="anonymous"></script> 
 

 
    <header class="header"> 
 
    <ul class="menu"> 
 

 
    <li><a id="upload" href="#">upload</a></li> 
 
    <li><a href="#">test</a></li> 
 
    </ul> 
 
</header> 
 

 
<form action="//" method="post" enctype="multipart/form-data" id="img_up"> 
 

 
    <input type="file" name="fileToUpload" id="fileToUpload"> 
 
    <input type="submit" value="Upload Image" name="submit"> 
 
</form> 
 

 

mit einem Daumen Show- hochladen möchten