Wie erhalte ich den Dateinamen, wenn der Benutzer eine Datei über <input type = “file” /> auswählt?

75

Ich habe bereits ähnliche Fragen gesehen, die aus Sicherheitsgründen keine Lösung finden.

Aber heute sehe ich, dass Hostmonster dies erfolgreich implementiert hat, wenn ich ein Ticket öffne und eine Datei in das Backend anhänge.

Es funktioniert sowohl mit Firefox als auch mit IE (Version 8 um genau zu sein).

Ich habe überprüft, dass es sich genau um clientseitiges Scripting handelt. Es wird keine Anfrage gesendet (mit Firebug).

Können wir diese Frage noch einmal überdenken?

javascript html file user198729
quelle
Was meinst du mit "einen Dateinamen bekommen"? Ist der Dateiname nicht offensichtlich, weil der Benutzer ihn gerade ausgewählt hat?
John Feminella

Antworten:

115

Sie können den Dateinamen abrufen , aber nicht den vollständigen Pfad des Client-Dateisystems.

Versuchen valueSie, während inputdes changeEreignisses auf das Attribut Ihrer Datei zuzugreifen .

Die meisten Browser geben Ihnen nur den Dateinamen an , aber es gibt Ausnahmen wie IE8, die Ihnen einen falschen Pfad geben, wie: "C:\fakepath\myfile.ext"und ältere Versionen ( IE <= 6 ), die Ihnen tatsächlich den vollständigen Pfad des Client-Dateisystems geben (aufgrund des Fehlens) der Sicherheit).

document.getElementById('fileInput').onchange = function () {
  alert('Selected file: ' + this.value);
};
Christian C. Salvadó
quelle
9
Ich komme C:\fakepath\...in Chrom, aber es ist gut für meine Zwecke. Vielen Dank.
Eichhörnchen
2
Hier geht es um Sicherheitsgründe. Websites dürfen den Ordnerpfad des Benutzers nicht lernen.
Kodmanyagha
49
Kann es so aufräumen:f = f.replace(/.*[\/\\]/, '');
Sam Watkins
Und was ist mit im IE?
11
Erfassen Sie das Ereignis in der Handlerfunktion und verwenden Sie dann evt.target.files [0] .name.
Janek Olszak
45

Sie können den nächsten Code verwenden:

JS

    function showname () {
      var name = document.getElementById('fileInput'); 
      alert('Selected file: ' + name.files.item(0).name);
      alert('Selected file: ' + name.files.item(0).size);
      alert('Selected file: ' + name.files.item(0).type);
    };

HTML

<body>
    <p>
        <input type="file" id="fileInput" multiple onchange="showname()"/>
    </p>    
</body>
Alex Paulino
quelle
8

Ich habe es gerade getestet und es scheint in Firefox & IE zu funktionieren

<html>
    <head>
        <script type="text/javascript">
            function alertFilename()
            {
                var thefile = document.getElementById('thefile');
                alert(thefile.value);
            }
        </script>
    </head>
    <body>
        <form>
            <input type="file" id="thefile" onchange="alertFilename()" />
            <input type="button" onclick="alertFilename()" value="alert" />
        </form>
    </body>
</html>
John Boker
quelle
1
Das ist interessant. Wenn ich es tue, bekomme ich C:\fakepath\background.jpg. Wörtlich das.
Wylliam Judd
4

Ich beantworte diese Frage über Simple Javascript , das in allen Browsern unterstützt wird, die ich bisher getestet habe (IE8 bis IE11, Chrome, FF usw.).

Hier ist der Code. 

function GetFileSizeNameAndType()
        {
        var fi = document.getElementById('file'); // GET THE FILE INPUT AS VARIABLE.

        var totalFileSize = 0;

        // VALIDATE OR CHECK IF ANY FILE IS SELECTED.
        if (fi.files.length > 0)
        {
            // RUN A LOOP TO CHECK EACH SELECTED FILE.
            for (var i = 0; i <= fi.files.length - 1; i++)
            {
                //ACCESS THE SIZE PROPERTY OF THE ITEM OBJECT IN FILES COLLECTION. IN THIS WAY ALSO GET OTHER PROPERTIES LIKE FILENAME AND FILETYPE
                var fsize = fi.files.item(i).size;
                totalFileSize = totalFileSize + fsize;
                document.getElementById('fp').innerHTML =
                document.getElementById('fp').innerHTML
                +
                '<br /> ' + 'File Name is <b>' + fi.files.item(i).name
                +
                '</b> and Size is <b>' + Math.round((fsize / 1024)) //DEFAULT SIZE IS IN BYTES SO WE DIVIDING BY 1024 TO CONVERT IT IN KB
                +
                '</b> KB and File Type is <b>' + fi.files.item(i).type + "</b>.";
            }
        }
        document.getElementById('divTotalSize').innerHTML = "Total File(s) Size is <b>" + Math.round(totalFileSize / 1024) + "</b> KB";
    }
    <p>
        <input type="file" id="file" multiple onchange="GetFileSizeNameAndType()" />
    </p>

    <div id="fp"></div>
    <p>
        <div id="divTotalSize"></div>
    </p>
Erweitern Sie das Snippet

* Bitte beachten Sie, dass die Dateigröße in KB (Kilobyte) angezeigt wird. Um in MB zu gelangen, teilen Sie es durch 1024 * 1024 und so weiter *.

Bei der Auswahl werden solche Dateiausgaben ausgeführt Momentaufnahme einer Beispielausgabe dieses Codes

vibs2006
quelle