it-swarm.com.de

Wie kann ich eine neue Datei hochladen, wenn ich auf die Schaltfläche "Bild" klicke?

Ich habe die Aufgabe, eine neue Datei über die Schaltfläche "Bild anklicken" hochzuladen. Mein Code ist

    <label>File</lable>
    <input type="image" src="http://upload.wikimedia.org/wikipedia/commons/c/ca/Button-Lightblue.svg" width="30px"/>

Mit einem Klick auf diesen Button möchte ich eine neue Datei hochladen. Wie kann ich das machen? Sie können meinen Code von Demo überprüfen

19
Niths

Sie können ein Eingabefeld für versteckte Dateien hinzufügen, z.

<input type="image" src="http://upload.wikimedia.org/wikipedia/commons/c/ca/Button-Lightblue.svg" width="30px"/>
<input type="file" id="my_file" style="display: none;" />

Und TU:

$("input[type='image']").click(function() {
    $("input[id='my_file']").click();
});

Demo :: pdated Fiddle

42

Es wird kein Javascript benötigt. Geben Sie einfach den <input> Und den <img> In <label> Ein und verstecken Sie den <input> Wie folgt:

   <label for="image">
      <input type="file" name="image" id="image" style="display:none;"/>
      <img src="IMAGE URL"/>
   </label>
5
Perlat Kociaj

Wenn Sie nach einer browserübergreifenden Lösung suchen, sollten Sie sich plupload ( http://www.plupload.com ansehen. Soweit ich mich erinnere, werden auch Bildschaltflächen unterstützt.

2
Rasmus Bech

wenn Sie die falsche Eingabe verwenden, verwenden Sie stattdessen file. Wenn Sie möchten, dass die Schaltfläche wie der Kreis in Ihrer Codedemo aussieht, müssen Sie CSS verwenden, um das Erscheinungsbild von "submit" zu ändern. Dies muss in einer Form sein:

<form action="upload_file.php" method="post" enctype="multipart/form-data">
  <input type="file" name="myfile"/>
  <input type="submit" class="circle-btn"/>
<form>

Ich weiß nicht, welche Sprache Sie auf dem Server verwenden (PHP, ASP.NET usw.), aber Sie müssen eine Seite erstellen (zum Beispiel "upload_file.php" für PHP). Sie können leicht Beispiele in Google finden, wie man eine solche Seite erstellt. Kopieren Sie einfach den Code:

Ein Beispiel in PHP: http://www.w3schools.com/php/php_file_upload.asp

Ich hoffe es hilft :)

2
Remo H. Jansen

Sie können dies mit CSS tun.

Bitte überprüfen Sie die 4. Antwort in diesem Blog.

Wie kann ich die Schaltfläche zum Durchsuchen anpassen?

Sie können Ihr Bild als Hintergrundbild der Klasse . Button verwenden.

1
Supriti Panda

Nachtrag für DemoUser Antwort .focus () funktioniert bei mir.

  $("input[type='image']").click(function() {
    $("input[id='my_file']").focus().click();
  });
0
user1087079